vue?cli?局部混入mixin和全局混入mixin的過程
局部混入mixin和全局混入mixin
應(yīng)用場(chǎng)景
兩個(gè)組件,都需要用到同一個(gè)點(diǎn)擊事件方法,此時(shí)使用mixin混入,可以很好的實(shí)現(xiàn)代碼的復(fù)用。
在vue cli搭建的項(xiàng)目中,src目錄下新建mixin.js文件:
// 對(duì)外暴露mixin對(duì)象 export const mixin = { data() { return { msg: 'hello' } }, methods: { click() { alert('你點(diǎn)我了') } } } export const mixin2 = { mounted() { console.log('mounted'); } }
App.vue中引入兩個(gè)組件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兩個(gè)組件中點(diǎn)擊第一行的文字會(huì)彈出提示:‘你點(diǎn)我了’,組件中分別引入mixin混入,
Student.vue:
<template> <div> <p @click="click">學(xué)生姓名:{{name}}</p> <p>學(xué)生年齡:{{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">學(xué)校名稱:{{name}}</p> <p>學(xué)校地址:{{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對(duì)象:
import {mixin} from './mixin' // 引入多個(gè)mixin import {mixin, mixin2} from './mixin' // 全局混入 Vue.mixin(mixin) // Vue.mixin(mixin2)
頁面效果:
mixin對(duì)象中的msg也會(huì)混入到Vue實(shí)例和組件中。
如果想要同時(shí)引入兩個(gè)混入,則使用下面的引入方式多引入一個(gè)變量即可:
import {mixin, mixin2} from '../mixin'
如果組件和混入mixin中同時(shí)有鉤子函數(shù)如mounted,則均會(huì)執(zhí)行。
mixins的使用方法和注意點(diǎn)
混入 (mixins): 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?;烊雽?duì)象可以包含任意組件選項(xiàng)。
1. 把Mixin混入到當(dāng)前的組件中,方法和參數(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默認(rèn)值,并沒有被修改
所以我們得出結(jié)論,mixin中data的值各個(gè)組件中不共享。
2. 值作為對(duì)象,如methods, components等,選項(xiàng)會(huì)被合并。如果有沖突則組件覆蓋mixin中對(duì)象
例如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 模版中,分別調(diào)用,如下
// 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>
在控制臺(tái)打印結(jié)果如下
// Admin
// Docs
我們可以看到admin 中方法 function two與 Mixin 中function two,名稱是相同的,所以在相同發(fā)生沖突的時(shí)候,組件的方法將會(huì)覆蓋Mixin中的方法。
3. 值為函數(shù)的選項(xiàng),如created,mounted等,就會(huì)被合并調(diào)用,Mixin里的hook函數(shù)在組件里的hook函數(shù)之前調(diào)用
比如在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中應(yīng)用
// 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>
我們?cè)诳刂婆_(tái)可以看到
Admin.vue 是先調(diào)用Mixin中create及方法,在調(diào)用Admin中Create中方法的
同理,Docs.vue 中也是如此
所以我們得出結(jié)論
值為函數(shù)的選項(xiàng),如created,mounted等,就會(huì)被合并調(diào)用,Mixin里的hook函數(shù)在組件里的hook函數(shù)之前調(diào)用。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 自定義指令實(shí)現(xiàn)一鍵 Copy功能
指令 (Directives) 是帶有 v- 前綴的特殊特性。這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)一鍵 Copy的功能,需要的朋友可以參考下2019-09-09vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08vue3使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比的代碼詳解
這篇文章主要為大家詳細(xì)介紹了在vue3中使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以參考一下2023-12-12簡(jiǎn)單理解vue中el、template、replace元素
這篇文章主要幫助大家簡(jiǎn)單理解vue中el、template、replace元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫一個(gè)數(shù)字華容道游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04