1. 概述
老话说的好：舍得舍得，先舍才能后得。
言归正传，今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用。
2. Mixin 的使用
2.1 不使用 Mixin 的写法
<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ data(){ return { num : 1 } }, created() { console.info('created'); }, methods : { myAdd() { console.info('myAdd'); } }, template:` <div> <button @click="myAdd">增加</button> <div>{{num}}</div> </div> ` }); const vm = app.mount("#myDiv");这个例子中，我们使用了之前聊过的 data、生命周期函数 created，method
2.2 在 Mixin 中定义 data
const myMixin = { data(){ return { num : 2, count : 1 } } } const app = Vue.createApp({ data(){ return { num : 1 } }, created() { console.info('created'); }, mixins:[myMixin], methods : { myAdd() { console.info('myAdd'); } }, template:` <div> <button @click="myAdd">增加</button> <div>{{num}}</div> <div>{{count}}</div> </div> ` });这个例子中，我们在 Mixin 中定义了 data，并在主组件中使用 mixins:[myMixin] 引用了 Mixin。
并且我们得到了一个结论，组件中的 data 变量比 Mixin 中 data 变量的优先级高，因此 num 最终是 1，而不是 2。
2.3 在 Mixin 中定义生命周期函数
const myMixin = { data(){ return { num : 2, count : 1 } }, created() { console.info('myMixin created'); }, }两个生命周期函数都会执行，Mixin 的先执行，组件中的后执行
2.4 在 Mixin 中定义 method
const myMixin = { data(){ return { num : 2, count : 1 } }, created() { console.info('myMixin created'); }, methods : { myAdd() { console.info('myMixin myAdd'); } }, }组件中 method 的会覆盖 mixin中的同名 method
2.5 子组件中使用 Mixin
app.component('sub-com', { mixins:[myMixin], template: ` <div>{{count}}</div> ` }); template:` <div> <button @click="myAdd">增加</button> <div>{{num}}</div> <sub-com /> </div> `子组件中使用 Mixin，需要在子组件中使用 mixins:[myMixin] 引用 Mixin，只在主组件中引用 Mixin 是不行的，主组件、子组件都需要引用 Mixin。
本文来自https://www.cnblogs.com/w84422/p/16100513.html
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除