VUE mixins（混入）

mixins是在引入组件之后将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并相当于在引入后父组件的各种属性方法都被扩充了。

单纯组件引用：

父组件 + 子组件 >>> 父组件 + 子组件

mixins：

父组件 + 子组件 >>> new父组件

意在重用其功能我们会通过接口继承的方式来实现功能的复用但是在javascript中我们没办法通过接口继承的方式但是我们可以通过javascript特有的原型链属性将功能引用复制到原型链上达到功能的注入。

值得注意的是：

在使用mixins时父组件和子组件同时拥有着子组件内的各种属性方法但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。

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" }

  }

})

请参考官方文档

总结一下：

技术细节学习难度不大在需要深入的时候再深入了解最佳。
想要做成事需要更宏观的技术思维渐渐变得眼光宽阔格局很大。
指引方向比走路更重要。
技术最终为业务服务懂技术细节和让业务先赢没有必然的关系。

巴特西

VUE mixins（混入）

最新文章

热门文章