对mixins的理解以及使用

最新推荐文章于 2024-04-18 16:27:27 发布

wangyalong、

最新推荐文章于 2024-04-18 16:27:27 发布

阅读量304

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wangyalong4/article/details/105442423

本文深入解析Vue.js中的混入(mixins)功能，探讨如何利用混入在组件间分发功能，实现代码复用。文章详细说明了混入的选项合并规则，包括数据对象的递归合并原则和钩子函数的调用顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mixins

mixins选项接收一个混入对象的数组，这些混入对象可以想像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，混入提供了一种非常灵活的方式，来分发vue组建中的功能，当组建使用混入对象时，所有混入对象的选项将混合进入该组建本身的选项。
例

//mixin组建
export default {
  data() {
    return {
      message: "hello i am mixin"
    };
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
mixins: [subProps],
  mounted() {
    console.log(this.message);//hello i am mixin
  },

选项合并

当组建和混入对象含有同名选项时，如数据对象会在内部进行递归合并，并在发生冲突时以组建数据优先。
例

//mixin组建
export default {
  data() {
    return {
      message: "hello",
      foo: "abc"
    };
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
  data() {
    return {
      message: "good",
      bar: "bye",
    };
  },
  mixins: [subProps],
  mounted() {
    console.log(this.message);//good
    console.log(this.bar);//bye
    console.log(this.foo);//abc
  },

混入对象的钩子将在组建自身钩子之前调用

//mixin组建
export default {
  data() {
    return {
      message: "hello",
      foo: "abc"
    };
  },
  created() {
    console.log("abc");
  }
};
//引入到混合使用的组建中
import subProps from "../mixins/subProps";
  created() {
    console.log("def");
  },
  mixins: [subProps],
  //abc   def