Vue中的mixin语法

1.mixin语法

 mixin就是在组件中混入数据的语法

•     mixin 混入 组件里没有数据的时候会使用混入的数据
•     组件data优先级 高于 mixin data优先级
•     如果是生命周期函数 先执行mixin里面的 再执行组件里面的
•      methods里面的情况和data里面的情况一样

2.局部mixin

 

const app = Vue.createApp({
      data() {
        return {
          number: 1,
          count: 2,
        };
      },
      created() {
        console.log("created");
      },
      //局部的mixin需要用这种语法引入
      mixins: [myMixin],
      methods: {
        handleClick() {
          console.log("handleClick");
        },
      },
      template: `
            <div>
                <div>{{number}}</div>
                <child/>
                <button @click="handleClick">增加</button>
            </div>
        `,
    });
// 局部的mixin
   const myMixin = {
       data() {
         return { number: 2 };
       },
       created() {
         console.log("mixin created");
       },
       methods: {
         handleClick() {
           console.log("mixin handleClick");
         },
       },
    };

3.全局mixin

全局mixin所有的组件都能使用，而且不用注册 

 

const app = Vue.createApp({
      data() {
        return {
          number: 1,
          count: 2,
        };
      },
      created() {
        console.log("created");
      },
      //   mixins: [myMixin],
      methods: {
        handleClick() {
          console.log("handleClick");
        },
      },
      template: `
            <div>
                // 可以在这里使用mixin里面的数据 因为是全局的所以不用注册
                <div>{{number}}</div>
                <child/>
                <button @click="handleClick">增加</button>
            </div>
        `,
    });
    //全局的mixin
    app.mixin({
      data() {
        return { number: 2 };
      },
      created() {
        console.log("mixin created");
      },
      methods: {
        handleClick() {
          console.log("mixin handleClick");
        },
      },
    });

4.在mixin里面使用自定义属性

自定义属性就是和methods,data,生命周期函数这些在同一层级的数据变量 

 自定义属性 组件中的属性的优先级高于 mixin自定义属性的优先级

const myMixin = {
      number: 23,
    };

    const app = Vue.createApp({
      number: 11,
      mixins: [myMixin],
      template: `
            <div>
                <div>{{this.$options.number}}</div>
                <button @click="handleClick">增加</button>
            </div>
        `,
    });

 5.自己设置优先级

 

//设置mixin的优先级高于组件的优先级 
app.config.optionMergeStrategies.number = (mixinVal, appVal) => {
      return mixinVal || appVal;
    };