混入 mixins

minxins

  • 作用为减少options 重复： data、mathods、钩子等
  • 组件的共同选项抽出成一个混入对象放到一个文件中，组件使用 mixins 选项使用混入对象
  • 全局用 Vue.mixin({…})，局部用 options.mixins: [mixin1, mixin2]

定义混入对象文件 mixins/myMinxin.js：

  1. var myMixin = {
  2.   created: function () {
  3.     this.hello()
  4.   },
  5.   methods: {
  6.     hello: function () {
  7.       console.log('hello from mixin!')
  8.     }
  9.   }
  10. }
  12. export default myMinxin;

使用混入对象的组件：

  1. <template>
  2.     <div>Hi</div>
  3. </template>
  4. <script>
  5.     import myMinxin from "../mixins/myMinxin.js";
  6.   export default {
  7.       mixins: [myMinxin]
  8.   };
  9. </script>

选项合并：类似继承与覆写

  • 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
  • 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
  • 同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

  • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

    继承 extends

  • 与 mixins 相似，不同的是 一个 extends 可以引入多个 mixins, 父组件只能引用一个 extends

  • 全局用 Vue.extend({…})，局部用 options.extends: {…} ```javascript import Vue from “vue”; import myMinxin1 from “../mixins/myMinxin1.js”; import myMinxin2 from “../mixins/myMinxin2.js”; import myMinxin3 from “../mixins/myMinxin3.js”;

const MyVue = Vue.extend{ // 注册使用 extend mixins: [myMinxin1, myMinxin3, myMinxin3] }

export default MyVue;

  1. ```vue
  2. <template>
  3.     <div>Hi</div>
  4. </template>
  5. <script>
  6.     import MyVue from "../MyVue.js";
  7.   export default {
  8.       extends: MyVue   // 选项为 extends
  9.   };
  10. </script>

提供与注入 provide & inject

provide & inject

  • 作用：大范围的 data 与 method 等共用，主要在开发高阶插件/组件库时使用
  • 通过子组件改变父组件的属性
  • 祖先 provide 需要改变的属性与改变属性的方法，因为父组件 provide 的属性是复制的，因此还需要 provide 改变属性的方法，也可以传父组件属性的引用然后从子组件中直接改变属性值，但是不推荐，容易失控
  • 后代 inject 祖先 provide 的属性与方法
  • 大范围作用，隔 N 代共享信息 ```vue
``` ```vue

``` provide-inject.png