Vue.js中使用Mixins

本文使用 前端封装字典 介绍

话不多说直接上代码

CurdDict.js

const CurdDict = {
  data() {
    //判断组件是否定义了curdDictTypes字典数组
    if (this.$options !== undefined && this.$options.curdDictTypes !== undefined && this.$options.curdDictTypes !== null) {
      return {
        //防止后期方便使用
        curdDictTypes: this.$options.curdDictTypes,
        //字典数组 此处将结构都定义出来，方便敲代码的时候有字段提示
        curdDictList: [{
          type: "",
          list: [{
            label: "",
            value: ""
          }]
        }]
      }
    }
  },
  created() {
    //判断组件是否定义了curdDictTypes字典数组
    if (this.$options !== undefined && this.$options.curdDictTypes !== undefined && this.$options.curdDictTypes !== null) {
      //清空
      this.$set(this, "curdDictList", [])
      //网络请求
      let curdDict = this.doHttpGetCurdDict(this.curdDictTypes);
      //设置值
      this.$set(this, "curdDictList", curdDict)
    }
  },
  methods: {
    //网络请求
    doHttpGetCurdDict(types) {
      console.log(types)
      return [
        {
          type: "user_type",
          list: [
            {
              label: "普通用户",
              value: "1"
            },
            {
              label: "管理员",
              value: "2"
            }
          ]
        }
      ]
    }
  }
}
export default CurdDict; 

main.js
引入刚刚的js

import CurdDict from "@/utils/dict/CurdDict";
Vue.mixin( CurdDict )

直接在组件data上面加上以下代码就行了

curdDictTypes : ["user_type"],

效果如下