快捷導(dǎo)航

詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令

更新時間：2017年09月06日 09:37:57 作者：Smallmotor

本篇文章主要介紹了詳解Vue.js組件可復(fù)用性的混合(mixin)方式和自定義指令，具有一定的參考價值，有興趣的可以了解一下

混合是什么

混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

例如:

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,
  }
})

我們會發(fā)現(xiàn),兩個組件中的數(shù)據(jù)大多數(shù)相同,這是我們可以將它們進行混合

// 首先,定義一個混合對象
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]
}
// 如果我們需要在第一個組件定義data為true時,我們可以直接在組件內(nèi)定義,他會覆蓋mixin的data
var tpl1={
  template:'#stpl1',
  minins:[mymixin],
  data:function(){
    msg:true
  }
}

自定義指令

除了默認設(shè)置的核心指令( v-model 和 v-show ),Vue 也允許注冊自定義指令。注意，在 Vue2.0 里面，代碼復(fù)用的主要形式和抽象是組件——然而，有的情況下,你仍然需要對純 DOM 元素進行底層操作,這時候就會用到自定義指令。

// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
 // 當綁定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

也可以注冊局部指令，組件中接受一個 directives 的選項：

directives: {
 focus: {
  // 指令的定義---
 }
}

然后你可以在模板中任何元素上使用新的 v-focus 屬性：

<input v-focus>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue動態(tài)獲取width的方法
今天小編就為大家分享一篇Vue動態(tài)獲取width的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
如何解決前端上傳Formdata中的file為[object?Object]的問題
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-07-07
Vue Element-ui表單校驗規(guī)則實現(xiàn)
Element-ui表單校驗規(guī)則，使得錯誤提示可以直接在form-item下面顯示，無需彈出框，感興趣的小伙伴們可以參考一下
2021-07-07
vue中自定義組件雙向綁定的三種方法總結(jié)
這篇文章主要介紹了vue中自定義組件雙向綁定的三種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue項目中使用jquery的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue項目中使用jquery的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用Vue具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧
2019-05-05
vue項目實現(xiàn)搜索內(nèi)容變紅色顯示
這篇文章主要為大家介紹了vue項目實現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Vue?websocket封裝實現(xiàn)方法詳解
項目中需要使用websocke，這個是我自己修修改改好多次之后用得最順手的一版，分享一下。這個封裝需要搭配vuex使用，因為收到的數(shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題
2022-09-09
vue利用sync語法糖實現(xiàn)modal彈框的項目實踐
本文主要介紹了vue利用sync語法糖實現(xiàn)modal彈框的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2022-07-07
Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過程
這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
vue 組件的封裝之基于axios的ajax請求方法
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08