Vue.js組件如何混合和自定義指令
這篇文章將為大家詳細(xì)講解有關(guān)Vue.js組件如何混合和自定義指令，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司，提供網(wǎng)站建設(shè)、成都做網(wǎng)站，網(wǎng)頁設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來合作!
混合是什么
混合 (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í)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
文章題目：Vue.js組件如何混合和自定義指令
本文URL：http://muchs.cn/article20/ipjjco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
