您好,登錄后才能下訂單哦!
混入 (mixin) 提供了一種非常靈活的方式,來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí),所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí),這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。
比如,數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并,并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。
var Mymixin = { data: function(){ return { message: 'hello', foo: 'abc' } } } export default { mixins:[Mymixin], data(){ return{ message:'good', bar:'kiss' } }, created(){ console.log(this.$data) //bar: "kiss",foo: "abc",message: "good" },
同名鉤子函數(shù)將合并為一個(gè)數(shù)組,因此都將被調(diào)用。另外,混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。
<script> var Mymixin = { created: function(){ console.log('混入對(duì)象的鉤子被調(diào)用') } } export default { mixins:[Mymixin], data(){ return{ message:'good', bar:'kiss' } }, created(){ console.log('組件鉤子被調(diào)用') // 混入對(duì)象的鉤子被調(diào)用 // 組件鉤子被調(diào)用 } } </script>
值為對(duì)象的選項(xiàng),
例如 methods、components 和 directives,將被合并為同一個(gè)對(duì)象。兩個(gè)對(duì)象鍵名沖突時(shí),取組件對(duì)象的鍵值對(duì)。
<script> var Mymixin = { methods: { foo: function(){ console.log('foo') }, conflicting: function(){ console.log('from mixin') } } } export default { mixins:[Mymixin], created(){ this.foo() this.conflicting() this.bar() // foo // from self // bar }, methods:{ bar:function(){ console.log('bar') }, conflicting: function(){ console.log('from self') } } } </script>
全局混入
混入也可以進(jìn)行全局注冊(cè)。使用時(shí)格外小心!一旦使用全局混入,它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí),這可以用來(lái)為自定義選項(xiàng)注入處理邏輯。
// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器??稍趍ain.js中寫入 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) 在任意組件里面都可以使用 new Vue({ myOption: 'hello!' }) // => "hello!" export default { myOption: 'hello!', }
請(qǐng)謹(jǐn)慎使用全局混入,因?yàn)樗鼤?huì)影響每個(gè)單獨(dú)創(chuàng)建的 Vue 實(shí)例 (包括第三方組件)。大多數(shù)情況下,只應(yīng)當(dāng)應(yīng)用于自定義選項(xiàng),就像上面示例一樣。推薦將其作為插件發(fā)布,以避免重復(fù)應(yīng)用混入。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。