关于Mixin在Vue中混合分发的使用(个人小结)*

关于Mixin在Vue中混合分发的使用(个人小结)*

定义:vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用。
用法1:直接在app.vue中写入以下js代码

var mixin = {
  created: function () {
    console.log('我是mixin')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('我是根组件')
  }
})
// => "我是mixin"
// => "我是根组件"

由于递归合并的特性,输出结果会以组件为主,例如:

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

用法2:没有谁会在实际开发中,在app.vue中进行以上代码的编写,所以,一般来说,我是会在components文件夹中对应的组件文件夹中建立一个mixin的文件包,在其中写入相关的js代码,结构目录为,components->comA->(xxx.vue/mixin->xxx.js)
xxx.js代码部分:(mixin的js文件中包含了vue组件的全部钩子函数,当然,同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用,如同样是created的钩子,mixin中输入1,使用mixin的组件输出2,那么调用的时候就是先1,后2,若directive等冲突,将优先使用组件内的。)

const mymixin = {
data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
 }
 export default mymixin //必须导出

组件内使用,代码如下:

import '@/mixin'; // 引入mixin文件(注意路径,此路径为案例路径)
export default {
 mixins: [mixin] //数组格式,当然,可以引入多个mixin,此时已经可以使用其中的方法了
}

既然mixin的导入,且写在data,methods属性等同级下,那么,在mixin中的方法如何调用?
当然this大法好喽,直接this.mixin中的方法名即可,例如:

//mixin的methods中有一方法为
testFn () {
  console.log('调用成功')
}
// 在组件中引入mixin后直接用(created为例测试)
created () {
  this.testFn() //创建组件时候即可输出'调用成功'
}
 

以上为个人总结,记录自己成长每一步,欢迎各位大牛指正补充,谢谢!