您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue.js組件如何混合和自定義指令,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
混合是什么
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?;旌蠈?duì)象可以包含任意組件選項(xiàng)。以組件使用混合對(duì)象時(shí),所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
例如:
var tpl1={ template:'#stpl1', data:function(){ return {msg:false} }, methods:{ msgf:function(){ this.msg=!this.msg } } } var tpl2={ template:'#stpl2', data:function(){ return {msg:false} }, methods:{ show:function(){ this.msg=true }, hide:function(){ this.msg=false } } } new Vue({ el:'#box', components:{ tpla:tpl1, tplb:tpl2, } })
我們會(huì)發(fā)現(xiàn),兩個(gè)組件中的數(shù)據(jù)大多數(shù)相同,這是我們可以將它們進(jìn)行混合
// 首先,定義一個(gè)混合對(duì)象 var mymixin = { data:function(){ return {msg:false} }, methods:{ show:function(){ this.msg=true }, hide:function(){ this.msg=false }, msgf:function(){ this.msg=!this.msg } } } var tpl1={ template:'#stpl1', minins:[mymixin] } var tpl2={ template:'#stpl2', minins:[mymixin] } // 如果我們需要在第一個(gè)組件定義data為true時(shí),我們可以直接在組件內(nèi)定義,他會(huì)覆蓋mixin的data var tpl1={ template:'#stpl1', minins:[mymixin], data:function(){ msg:true } }
自定義指令
除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ),Vue 也允許注冊(cè)自定義指令。注意,在 Vue2.0 里面,代碼復(fù)用的主要形式和抽象是組件——然而,有的情況下,你仍然需要對(duì)純 DOM 元素進(jìn)行底層操作,這時(shí)候就會(huì)用到自定義指令。
// 注冊(cè)一個(gè)全局自定義指令 v-focus Vue.directive('focus', { // 當(dāng)綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })
也可以注冊(cè)局部指令,組件中接受一個(gè) directives 的選項(xiàng):
directives: { focus: { // 指令的定義--- } }
然后你可以在模板中任何元素上使用新的 v-focus 屬性:
<input v-focus>
關(guān)于“Vue.js組件如何混合和自定義指令”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(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)容。