vue mixin 混入
如果在A组件和B组件中有相同的data属性、method方法等,可以将公共部分抽离出来,这就是mixin的作用
A组件:
<template> <div> <p>{{ aData }}</p> <p>{{ commonData }}</p> <button @click="aMethod">aMethod</button> <button @click="commonMethod">commonMethod</button> </div> </template> <script> export default { data() { return { aData: '组件A的数据', commonData: '公共的数据' } }, methods: { aMethod() { console.log('A的方法') }, commonMethod() { console.log('公共的方法') } }, mounted() { console.log('A-mounted') console.log('公共的mounted') } } </script>
B组件:
<template> <div> <p>{{ bData }}</p> <p>{{ commonData }}</p> <button @click="bMethod">bMethod</button> <button @click="commonMethod">commonMethod</button> </div> </template> <script> export default { data() { return { bData: '组件B的数据', commonData: '公共的数据' } }, methods: { bMethod() { console.log('B的方法') }, commonMethod() { console.log('公共的方法') } }, mounted() { console.log('B-mounted') console.log('公共的mounted') } } </script>
可以看到,A、B组件中的commonData属性、commonMethod方法、mounted中打印的语句都可以抽出来:
在src下新建mixin/index.js:
export default {
data() {
return {
commonData: '公共的数据'
}
},
methods: {
commonMethod() {
console.log('公共的方法')
}
},
mounted() {
console.log('公共的mounted')
}
}
在A组件中引入mixin,此时将公共部分的内容删除和原来的结果一样:
<template> <div> <p>{{ aData }}</p> <p>{{ commonData }}</p> <button @click="aMethod">aMethod</button> <button @click="commonMethod">commonMethod</button> </div> </template> <script> import mixin from '../mixin' export default { data() { return { aData: '组件A的数据' } }, methods: { aMethod() { console.log('A的方法') } }, mounted() { console.log('A-mounted') }, mixins: [mixin] } </script>
B组件中同理,但是如果说B组件中和mixin传来的有相同数据,B组件中的数据优先级高:
<template> <div> <p>{{ bData }}</p> <p>{{ commonData }}</p> <button @click="bMethod">bMethod</button> <button @click="commonMethod">commonMethod</button> </div> </template> <script> import mixin from '../mixin' export default { data() { return { bData: '组件B的数据', commonData: '公共的数据11' } }, methods: { bMethod() { console.log('B的方法') }, commonMethod() { console.log('公共的方法11') } }, mounted() { console.log('B-mounted') console.log('公共的mounted11') }, mixins: [mixin] } </script>
通过mixins引入组件后,会给当前组件额外扩展一些属性和方法,简单的说就是给组件额外添加了一个BUFF
场景:封装插件的时候用mixin
mixin----全局使用
mixins----局部使用
步骤:
①utils下新建mixin.js:
export default { // new Vue()中的配置项都可以在这里加 data(){ return{ title:"我是额外提供的一个属性" } }, created() { console.log("我是一个buff") } }
②App.vue中引入:
import Mixin from "./utils/mixin.js";
③添加mixins属性:
mixins:[Mixin],
此时在created中就多一个console.log打印,在App.vue页面可以直接使用title属性,就和写在自己的data中一样。