mixin混入

Posted 2021-12-13 嘿！那个姑娘

mixin混入，听着名字感觉是什么很不好理解的东西，其实混入很简单

作用：混入其实就是一个js对象，来分发 Vue 组件中的可复用功能

vue文件中中就是export default{}，混入其实就是这个东西，包含了里面的所有东西data、methods、created...

使用：在src文件夹中创建一个mixin的文件夹，里面就可以存放各种混入的对象的的文件。

混入文件formBtnContent.js,里面定义了两个公共的方法

export default {
  methods: {
    //重置搜索表格
    resetBtnClick() {
      this.$refs.pageContent.getDataList()
    },
    //点击搜索
    searchBtnClick(searchInfo) {
      this.$refs.pageContent.getDataList(searchInfo)
    },
  }
}

在需要使用这两个方法的地方加入这两行代码这两个方法就混入到这个文件中了，不需要在这个文件中单独写这两个方法了，如果很多地方用到这两个方法，就可以通过这两行代码代替，这就是混入的好处

局部混入

如果要使用全局混入

//Vue.mixin(混入的对象)
Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

当遇到命名冲突时，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，就是data里面的属性会以组件中的为准，方法会进行合并