vue中mixins如何使用,針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器,站群服務(wù)器,成都棕樹(shù)機(jī)房,海外高防服務(wù)器,機(jī)柜大帶寬租用·托管,動(dòng)態(tài)撥號(hào)VPS,海外云手機(jī),海外云服務(wù)器,海外服務(wù)器租用托管等。
一、定義公共的mixins文件:如mixin.vue
export default {
name: 'mixins-test-main',
components: {},
props: {},
data () {
return {
mixinData: 'mixin中的變量'
}
},
methods: {
mixinFunction () {
return '我是mixins里面的公共方法'
},
},
mounted () {
},
computed: {}
}
二、在你頁(yè)面內(nèi)調(diào)用:需要import這個(gè)mixins文件 ,然后通過(guò)mixins:['文件名']來(lái)使用就可以了
調(diào)用mixin方法
import MixinItem from './mixin'
export default {
name: 'mixin-test-comp',
props: {},
mixins: [MixinItem],
components: {},
data () {
return {}
},
methods: {
handleMixin () {
console.log('mixin-data=========', this.mixinData)
let mixfun = this.mixinFunction()
console.log('mixin-fun====>>>', mixfun)
},
},
mounted () {
},
computed: {}
}
三、下面來(lái)說(shuō)說(shuō)mixins的特點(diǎn):
1、方法和參數(shù)在各組件中不共享
比如混入對(duì)象中有一個(gè) cont:1 的變量,在組件A中改變cont值為5,這時(shí)候在組件B中獲取這個(gè)值,拿到的還是1,還是混入對(duì)象里的初始值,數(shù)據(jù)不共享
2、值為對(duì)象的選項(xiàng),如methods,components等,選項(xiàng)會(huì)被合并,鍵沖突的組件會(huì)覆蓋混入對(duì)象的,比如混入對(duì)象里有個(gè)方法A,組件里也有方法A,這時(shí)候在組件里調(diào)用的話,執(zhí)行的是組件里的A方法
3、值為函數(shù)的選項(xiàng),如created,mounted等,就會(huì)被合并調(diào)用,混合對(duì)象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用,同一個(gè)鉤子函數(shù)里,會(huì)先執(zhí)行混入對(duì)象的東西,再執(zhí)行本組件的
四、與vuex的區(qū)別
vuex:用來(lái)做狀態(tài)管理的,里面定義的變量在每個(gè)組件中均可以使用和修改,在任一組件中修改此變量的值之后,其他組件中此變量的值也會(huì)隨之修改。
Mixins:可以定義共用的變量,在每個(gè)組件中使用,引入組件中之后,各個(gè)變量是相互獨(dú)立的,值的修改在組件中不會(huì)相互影響。
五、與公共組件的區(qū)別
組件:在父組件中引入組件,相當(dāng)于在父組件中給出一片獨(dú)立的空間供子組件使用,然后根據(jù)props來(lái)傳值,但本質(zhì)上兩者是相對(duì)獨(dú)立的。
Mixins:則是在引入組件之后與組件中的對(duì)象和方法進(jìn)行合并,相當(dāng)于擴(kuò)展了父組件的對(duì)象與方法,可以理解為形成了一個(gè)新的組件。
關(guān)于vue中mixins如何使用問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。