vue?cli?局部混入mixin和全局混入mixin的過程
局部混入mixin和全局混入mixin
應用場景
兩個組件，都需要用到同一個點擊事件方法，此時使用mixin混入，可以很好的實現(xiàn)代碼的復用。
在vue cli搭建的項目中，src目錄下新建mixin.js文件：
// 對外暴露mixin對象
export const mixin = {
data() {
return {
msg: 'hello'
}
},
methods: {
click() {
alert('你點我了')
}
}
}
export const mixin2 = {
mounted() {
console.log('mounted');
}
}App.vue中引入兩個組件Student和School：
<template> ? <div> ? ? <School></School> ? ? <Student></Student> ? </div> </template>
<script>
import School from './components/School'
import Student from './components/Student'
export default {
? name: 'App',
? components: {
? ? School,
? ? Student
? }
}
</script>
?
<style>
</style>1、局部混入mixin
Student和School兩個組件中點擊第一行的文字會彈出提示：‘你點我了’，組件中分別引入mixin混入，
Student.vue:
<template>
<div>
<p @click="click">學生姓名：{{name}}</p>
<p>學生年齡：{{age}}</p>
</div>
</template><script>
import {mixin} from '../mixin'
export default {
name: 'Student',
data() {
return {
name: 'Tom',
age: 18
}
},
mixins: [mixin]
}
</script>
<style>
</style>School.vue:
<template>
<div>
<p @click="click">學校名稱：{{name}}</p>
<p>學校地址：{{address}}</p>
</div>
</template><script>
import {mixin} from '../mixin'
export default {
name: 'Student',
data() {
return {
name: 'zz',
address: 'bj'
}
},
mixins: [mixin]
}
</script>
<style>
</style>2、全局混入mixin
在main.js中引入暴露的mixin對象：
import {mixin} from './mixin'
// 引入多個mixin
import {mixin, mixin2} from './mixin'
// 全局混入
Vue.mixin(mixin)
// Vue.mixin(mixin2)頁面效果：
mixin對象中的msg也會混入到Vue實例和組件中。
如果想要同時引入兩個混入，則使用下面的引入方式多引入一個變量即可：
import {mixin, mixin2} from '../mixin'如果組件和混入mixin中同時有鉤子函數(shù)如mounted，則均會執(zhí)行。
mixins的使用方法和注意點
混入 (mixins)： 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。
1. 把Mixin混入到當前的組件中，方法和參數(shù)在各組件中不共享
export const myMixin = {
data() {
return {
number: 1,
data: {
str: 'hello world'
}
}
},
}
在模版Admin， 和Docs中
<template>
? <span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
? ? mixins: [myMixin],
? ? created() {
? ? ? ? this.number ++;
? ? ? ? this.data.str = '=========== i am a new str'
? ? }
}
</script>
<template>
? <span>Docs {{number}} {{data.aa}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
? ? mixins: [myMixin]
}
</script>頁面顯示, admin顯示的最新修改的number和str值，而Docs中顯示的是mixin默認值，并沒有被修改
所以我們得出結論，mixin中data的值各個組件中不共享。
2. 值作為對象，如methods， components等，選項會被合并。如果有沖突則組件覆蓋mixin中對象
例如mixin中定義method
export const myMixin = {
data() {
return {
number: 1,
data: {
str: 'hello world'
}
}
},
methods: {
one() {
console.log('============ one');
},
two() {
console.log('============ two');
}
}
}
Mixin在Admin 和 Docs 模版中，分別調用，如下
// Admin
<template>
<span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
mixins: [myMixin],
created() {
this.self();
this.one();
this.two();
},
methods: {
self() {
console.log('============ admin self');
},
two() {
console.log('============ admin func_two');
}
}
}
</script>
// Docs
<template>
<span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
mixins: [myMixin],
created() {
this.one();
this.two();
},
}
</script>
在控制臺打印結果如下
// Admin
// Docs
我們可以看到admin 中方法 function two與 Mixin 中function two，名稱是相同的，所以在相同發(fā)生沖突的時候，組件的方法將會覆蓋Mixin中的方法。
3. 值為函數(shù)的選項，如created,mounted等，就會被合并調用，Mixin里的hook函數(shù)在組件里的hook函數(shù)之前調用
比如在Mixin中定義
export const myMixin = {
data() {
return {
number: 1,
data: {
str: 'hello world'
}
}
},
created() {
console.log('============= mixin created');
this.hello();
},
methods: {
hello() {
console.log('============== hello');
},
one() {
console.log('============ one');
},
two() {
console.log('============ two');
}
}
}
在Admin 和Docs中應用
// Admin
<template>
<span>Admin: {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
mixins: [myMixin],
created() {
console.log('========== admin created');
this.number ++;
this.data.str = '=========== i am a new str'
this.self();
this.one();
this.two();
},
methods: {
self() {
console.log('============ admin self');
},
two() {
console.log('============ admin func_two');
}
}
}
</script>
// Docs
<template>
<span>Docs {{number}} {{data.str}}</span>
</template>
<script>
import {myMixin} from '../mixin/mixin';
export default {
mixins: [myMixin],
created() {
console.log('========== docs created');
this.one();
this.two();
},
}
</script>
我們在控制臺可以看到
Admin.vue 是先調用Mixin中create及方法，在調用Admin中Create中方法的
同理，Docs.vue 中也是如此
所以我們得出結論
值為函數(shù)的選項，如created,mounted等，就會被合并調用，Mixin里的hook函數(shù)在組件里的hook函數(shù)之前調用。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中data里面的數(shù)據(jù)相互使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2 拖動排序 vuedraggable組件的實現(xiàn)
這篇文章主要介紹了vue2 拖動排序 vuedraggable組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
今天小編就為大家分享一篇在vue項目中,將juery設置為全局變量的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-cli 為項目設置別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue3使用echarts tree高度自適應支持滾動查看功能
這篇文章主要介紹了Vue3使用echarts tree高度自適應支持滾動查看功能,文章同通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-06-06
element ui table（表格）實現(xiàn)點擊一行展開功能
這篇文章主要給大家介紹了關于element ui table（表格）實現(xiàn)點擊一行展開功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價刷新的案列給大家詳細講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了解決vue表單為空也能提交的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Element中el-select下拉框實現(xiàn)選中圖標并回顯圖標
本文主要介紹了Element中el-select下拉框實現(xiàn)選中圖標并回顯圖標，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
VUE2 前端實現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例
下面小編就為大家分享一篇VUE2 前端實現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02