526互联

[Vue]mixin混合/混入

发布时间 2024-01-09 09:07:12作者: 夕苜19

可以把多个组件共用的配置提取成一个混入对象，提高复用率。

mixin是一个js文件，可自定义命名。

 

mixin.js

import { DICT_TYPE, getDictDatas } from "@/utils/dict";

export default {
  data() {
    return {
    }
  },
  computed: {
    // 数据字典
    dict_state() { return this.getDictDatas(DICT_TYPE.RDM_RESDIR_STATE) },
  },
  methods: {
    // 格式化
    booleanFormat(row, col, cell, index) {
      return cell ? "是" : "否"
    },
  }
}

 

组件中如何使用.vue

// 省略大部分代码
import dict from '../mixin.js'
export default {
    name: "",
    mixins: [dict],
    props: [],
    data() {
        return {}
    },
}