Vue混入(mixin)

理解:一个混入对象可以包含任意组件选项,这些选项将混入到组件本身的选项;
作用:用来分发Vue组件中的可服用功能;

局部混入
//选项合并
var mixin = {
  data: function () {
      return {
        message: 'hello',
        foo: 'abc'
       }
    },
    created: function () {
        console.log('混入对象的钩子被调用');
     },
     methods: {
        foo: function () {
             console.log('foo')
         },
         conflicting: function () {
             console.log('from mixin')
          }
      }
}
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log('组件钩子被调用');
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
   },
   methods: {
      bar: function () {
         console.log('bar')
      },
      conflicting: function () {
         console.log('from self')
      }
    }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

通过上面的例子,可以得出结论:

  1. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,
    发生冲突时以组件数据优先
  2. 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将
    在组件自身钩子之前调用。
  3. 值为对象的选项,例如 methods、components 和 directives,将被合并为同
    一个对象。两个对象键名冲突时,取组件对象的键值对。
全局混入

一旦使用全局混入,它将影响每个单独创建的 Vue 实例 (包括第三方组件),项目开发中不推荐,请谨慎使用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容