mixin混入 復(fù)用代碼段（類似于函數(shù)的用法）
場(chǎng)景:
- 多個(gè)組件如有相同的屬性，方法等
- 定義一個(gè)公共的混入，方便組件復(fù)用
- 注入到任意組件使用,組件中定義mixins屬性，值為數(shù)組
注意：
當(dāng)前組件 和 混入 中的方法或者屬性 沖突時(shí)，優(yōu)先使用自己的
<body>
<div id="app">
<home></home>
<news></news>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//定義一個(gè)混入,和定義組件的語(yǔ)法相同
const mixin1 = {
data(){
return {
msg:'hello'
}
},
methods:{
changeMsg(){
this.msg = '改變了'
}
}
}
//定義組件
let Home = {
template:`
<div>
Home組件
{{ msg }}
<button @click="changeMsg">改變</button>
</div>
`,
//比如home組件復(fù)用mixin，定義一個(gè)mixins，類似于components
//組件間復(fù)用mixin數(shù)據(jù)互不影響，注入mixin的語(yǔ)法如下
mixins:[mixin1]
}
let News = {
template:`
<div>
News組件
</div>
`
}
//注冊(cè)成全局組件
Vue.component('Home',Home);
Vue.component('News',News);
let vm = new Vue({
el:'#app',
data:{
},
})
</script>
