關(guān)于vue混入(mixin)的解讀
vue混入(mixin)的解讀
混入(mixin)提供了一種非常靈活的方式,來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時,所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
1.鉤子函數(shù)
混入對象的鉤子將在組件自身鉤子之前調(diào)用。
?// ?minxin.js const mixin = { ? data() { ? ? return{ ? ? ? msg1: '我是混入內(nèi)容1', ? ? ? msg2: '我是混入內(nèi)容2' ? ? } ? }, ? created() { ? ? console.log(this.msg3) ? } } export default mixin; </script> ... // 頁面組件 <template> ? <div class="header"> ? ? <h1></h1> ? </div> </template> <script> import mixin from './mixins/mixin' export default { ? mixins: [mixin], ? name: 'Header', ? data(){ ? ? return{ ? ? ? msg1: '我是組件內(nèi)容1', ? ? ? msg3: '我是組件內(nèi)容2' ? ? } ? }, ? created() { ? ? ? console.log(this.msg2) ? ? ? console.log(this.msg1) ? }, } </script> ?? ?? ?// 我是組件內(nèi)容2 ?? ?// 我是混入內(nèi)容2 ?? ?// 我是組件內(nèi)容1
2.普通方法合并
當(dāng)混合值為對象的選項(xiàng)時,例如 methods、components、directive,將被混合為同一個對象,兩個對象鍵名沖突時,取組件對象的鍵值對。
<body> ? ? <div id="app"></div> </body> <script src="./vue.js"></script> <script> ? ? var Mixins = { ? ? ? ? methods: { ? ? ? ? ? ? mixin: function() { ? ? ? ? ? ? ? ? console.log('MixinOne') ? ? ? ? ? ? }, ? ? ? ? ? ? mixinTwo: function () { ? ? ? ? ? ? ? ? console.log('MixinTwo') ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? new Vue({ ? ? ? ? el: '#app', ? ? ? ? mixins: [Mixins], ? ? ? ? methods: { ? ? ? ? ? ? mixin: function () { ? ? ? ? ? ? ? ? console.log('component') ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? mounted() { ? ? ? ? ? ? this.mixin() ? ? ? ? ? ? this.mixinTwo() ? ? ? ? } ? ? }) ? ?? ?? ?// component ?? ?// MixinTwo </script>
3.局部混入
在componnets目錄下新建mixins文件夾,并在mixins目錄下創(chuàng)建一個mixin.js文件,代碼如下:
const mixin = { ? data() { ? ? return { ? ? ? msg: "hello" ? ? } ? }, ? methods: { ? ? mixinMethod() { ? ? ? console.log(this.msg + ',這是mixin混入方法') ? ? } ? } } export default mixin;
在需要的頁面中引入:
<template> ?? ?<div>{{msg}}</div> </template> <script> import mixin from '../mixins/mixin' export default { ?? ?mixins: [mixin], ? ? data() { ?? ? ? ?return { ?? ? ? ?} ? ? } ?? ?mounted() { ?? ??? ?this.mixinMethod() ?? ?} } // hello,這是mixin混入的方法
4.全局混入
在main.js加入以下代碼
Vue.mixin({ ? data() { ? ? return { ? ? ? msg: 'hello' ? ? } ? }, ? methods: { ? ? mixinMethod() { ? ? ? console.log(this.msg+',這是mixin混入的方法') ? ? } ? } })
在組件中直接引用:
<template> ?? ?<div>{{msg}}</div> </template> <script> export default { ? ? data() { ?? ? ? ?return { ?? ? ? ?} ? ? } ?? ?mounted() { ?? ??? ?this.mixinMethod() ?? ?} } // hello,這是mixin混入的方法 </script>
vue中mixin混入注意事項(xiàng)
1.頁面和mixin的created都會執(zhí)行,先執(zhí)行mixin的,再執(zhí)行當(dāng)前頁面的;
2.當(dāng)前頁面可以訪問mixin的data和methods;
3.mixin里的方法可以調(diào)用頁面的data和methods;
4.可以在當(dāng)前頁面改變mixin里的data
注意:當(dāng)本組件與mixin有同名方法或同名數(shù)據(jù)時,優(yōu)先調(diào)用本組件的方法或數(shù)據(jù),混入的部分失效
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南(純凈版)
網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實(shí)uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue.js中vue-property-decorator的使用方法詳解
vue-property-decorator是一個用于在Vue.js中使用TypeScript裝飾器的庫,它能夠簡化 Vue 組件的定義,使代碼更加簡潔和可維護(hù),它能夠簡化Vue組件的定義,使代碼更加簡潔和可維護(hù),本文將深入探討vue-property-decorator的使用方法,并展示如何在Vue.js項(xiàng)目中應(yīng)用它2024-08-08vue實(shí)現(xiàn)子路由調(diào)用父路由的方法
這篇文章主要介紹了vue實(shí)現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑
這篇文章主要介紹了vue項(xiàng)目設(shè)置打包后的靜態(tài)文件訪問路徑,vue項(xiàng)目的最終項(xiàng)目文件需要經(jīng)過打包輸出,靜態(tài)文件的訪問路徑需要在vue.config.js文件中設(shè)置,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)雙向綁定底層實(shí)現(xiàn)原理,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11Vue3?Suspense實(shí)現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗(yàn),下面小編就來和大家詳細(xì)講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel
這篇文章主要介紹了vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06