mixin 混入

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。

作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

1.1 局部使用

mixins.js

//可以使用data,methods,周期函数等
const a = {
  data() {
    return {
      name: "mixin"
    };
  },
  created() {
    console.log("mixin...", this.name);
  },
  mounted() {},
  methods: {}
};
export default a;

demo1.vue

{{name}}    //mixin  
// 在组件中自动合并引入的数据，具体规则参考https://cn.vuejs.org/v2/guide/mixins.html
------------------------
import a from '../mixin'
mixins:[a]

demo2.vue

{{name}}    //mixin  
// 在组件中自动合并引入的数据，具体规则参考https://cn.vuejs.org/v2/guide/mixins.html
------------------------
import a from '../mixin'
mixins:[a]

2.2 全局引入

不推荐使用，因为他会影响vue和VueComponent的每一个实例对象

mixins.js

//可以使用data,methods,周期函数等
const a = {
  data() {
    return {
      name: "mixin"
    };
  },
  created() {
    console.log("mixin...", this.name);
  },
  mounted() {},
  methods: {}
};
export default a;

main.js

import a from "./mixin";
Vue.mixin(a);   //全局注册

demo.vue 在任何vue文件都可以使用，无需引入

{{name}}

如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/