什么是Mixin混入

混入 (mixin) 是一种非常灵活的 Vue 组件中的可复用方式，一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

使用Mixin混入data

首先定义Minxin

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

然后使用mixins，在组件中使用之前定义好的myMixin

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

打开浏览器页面渲染出组件的data数据。

将组件的data注释后，页面才渲染出Mixin混入的数据。

结论：==组件 data 优先级高于 Mixin 混入的 data==

使用Mixin混入钩子

在之前定义好的myMixin，写上钩子created，并在控制台输出：mixin created

            created(){
                console.log("mixin created");
            }

在组件上也写上钩子created，并在控制台输出：created

            created(){
                console.log("created");
            }

控制台输出：

结论：==先执行 Mixin 的钩子，再执行组件里的钩子==

使用Mixin混入方法

首先在组件模板绑定点击事件

template:`<div @click="handleClick">{{num}}</div>`

然后在Mixin和组件中写入响应事件的方法

	  //myMixin
      methods:{
                handleClick(){
                    console.log("mixin handleClick");
                }
            },

		//组件
        methods:{
                handleClick(){
                    console.log("handleClick");
                }
            },

打开浏览器触发点击事件控制台输出：handleClick

将组件的方法注释后，再次触发点击事件，控制台输出：mixin handleClick

结论：==组件 methods方法 优先级高于 Mixin 混入的 methods方法==

总结

Mixin： 将多个组件相同的逻辑，抽离出来复用；

使用Mixin混入data： 组件 data 优先级高于 Mixin 混入的 data;

使用Mixin混入钩子： 先执行 Mixin 的钩子，再执行组件里的钩子；

使用Mixin混入方法: 组件 methods方法 优先级高于 Mixin 混入的 methods方法；

结语

本文到此结束

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