前言

使用Mixin混入自定义属性

自定义属性：就是直接写在组件里的属性

定义一个Mixin，并写入自定义属性

		const myMixin = {
            num: 1
        };

创建vue实例，定义自定义属性，引入myMixin

        const app = Vue.createApp({
            num: 2,
            mixins: [myMixin],
        })

最后使用options进行插值

options 构造选项，是在创建 vue 实例时传入的参数，是一个对象。 options里面有五类属性： 数据：data、 props、 propsData、 computed、methods、 Watch DOM: el、 template、 render、 renderError 生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured 资源: directives、 filters、 components 组合: parent, mixins、 extends、 provide、 inject

	<div>{{this.$options.num}}</div>

打开浏览器页面渲染出组件的自定义属性数据。

将组件的自定义属性注释后，页面才渲染出Mixin混入的自定义属性数据。

结论：组件 自定义属性 优先级高于 Mixin 混入的 自定义属性

修改优先级

沿用使用Mixin混入自定义属性的代码，在组件后添加配置app.config，使用optionMergeStrategies属性修改优先级

		app.config.optionMergeStrategies.num = (mixinVal, appValue) => {
            return  mixinVal || appValue;
        }

页面效果：

局部Mixin

上面案例中使用的Mixin，就是局部Mixin。局部Mixin和局部组件的用法类似，局部Mixin在使用时，需要使用mixins声明。

定义局部Mixin：

		const myMixin = {
            data(){
                return {
                    num: 1
                }
            }
        };

使用局部Mixin：

        const app = Vue.createApp({
            mixins:[myMixin],
            template:`<div>{{num}}</div>`
        })

页面效果：

全局Mixin

全局Mixin类似于全局组件，默认注入每一个组件里，直接可用。

定义全局Mixin：

		app.mixin({
            data(){
                return {
                    num: 1
                }
            }
        })

使用全局Mixin：

 		const app = Vue.createApp({
            template:`<div>{{num}}</div>`
        })

页面效果：

Mixin存在的问题

• 变量来源不明，不利于代码的阅读；
• 使用多个Mixin可能会造成命名冲突；
• Mixin和组件可能会出现多对多关系，复杂度较高；

总结

使用Mixin混入自定义属性： 组件自定义属性优先级高于 Mixin 混入的 自定义属性；

修改优先级： 配置app.config，使用optionMergeStrategies属性修改优先级；

局部Mixin： 局部Mixin和局部组件的用法类似，局部Mixin在使用时，需要使用mixins声明；

全局Mixin： 全局Mixin类似于全局组件，默认注入每一个组件里，直接可用；

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！