Vue3 Mixin的基础使用

作者：温新

时间：2021-08-11

hi，我是温新，一名PHPer

Vue3 Mixin官方定义为：Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

官方的解释不好理解阿，看例子吧。

<div id="app">
    {{ webName }}
</div>


<script>
    // 使用一个对象定义Mixin
    const myMixin = {
        data () {
            return {
                webName:'个人博客'
            }
        },
        created(){
            console.log('Mixin created')
        }
    };

    const app = Vue.createApp({
        // 组件上使用Mixin
        mixins:[myMixin],
        data () {
            return { webName:'自如初' }
        },
        created(){
            console.log('created')
        }
    });

    app.mount('#app');
</script>

使用Mixin需要知道：

1）组件中的data 优先级大于 mixin中的data；

2）组件中的 methhods 优先级大于 mixin中的methods;

3）生命周期函数，先执行 mixin 中定义的生命周期函数，后执行组件中的生命周期函数;

4）自定义属性，组件中的属性优先级 大于 mixin中定义的属性

全局Mixin

<div id="app"></div>

<script>

    const app = Vue.createApp({
        data () {
            return { webName:'自如初' }
        },
        template:`
        <div>
            {{ webName }}
        <hr>
        <mi-demo></mi-demo>   
        </div>
        `
    });

    // 全局mixin
    app.mixin({
        data () {
            return {
                name:'全局mixin中的name'
            }
        }
    });

    app.component('mi-demo', {
        // 使用全局mixin中的name
        template:`<div>{{ name }}</div>`
    });

    app.mount('#app');
</script>

自定义属性值

<div id="app"></div>

<script>
    // 使用一个对象定义Mixin
    const myMixin = {
        webUrl:'www.ziruchu.com'
    };

    const app = Vue.createApp({
        // 组件上使用Mixin
        mixins:[myMixin],
        // 自定义属性
        webUrl:'https://www.ziruchu.com',
        data () {
            return { webName:'自如初' }
        },
        template:`
        <div>
            {{ this.$options.webUrl }}
        </div>
        `
    });

    // 修改属性优先级
    app.config.optionMergeStrategies.webUrl = (mixinValue, appValue) => {
        // 优先返回mixin中的属性值
        return mixinValue || appValue;
    }
    app.mount('#app');
</script>

我是温新

第天进步一点，就一点点