快捷導(dǎo)航

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

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

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

混合是什么

混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混合對象可以包含任意組件選項(xiàng)。以組件使用混合對象時，所有混合對象的選項(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,
  }
})

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

// 首先,定義一個混合對象
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
  }
}

自定義指令

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

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

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

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

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

<input v-focus>

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

您可能感興趣的文章:

相關(guān)文章

Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
強(qiáng)大Vue.js組件淺析
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強(qiáng)大的功能之一，感興趣的小伙伴們可以參考一下
2016-09-09
vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐
在開發(fā)Web應(yīng)用程序時，常常需要進(jìn)行登錄驗(yàn)證和權(quán)限管理，本文主要介紹了vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue頁面內(nèi)公共的多類型附件圖片上傳區(qū)域并適用折疊面板(示例代碼)
本文中實(shí)現(xiàn)的附件上傳區(qū)域支持超多類型附件分類型上傳，并且可根據(jù)特定條件具體展示某些類型的附件上傳，本文給大家分享Vue頁面內(nèi)公共的多類型附件圖片上傳區(qū)域并適用折疊面板的示例代碼，需要的朋友參考下吧
2021-12-12
Vue父組件調(diào)用子組件事件方法
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue移動端微信授權(quán)登錄插件封裝的實(shí)例
今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue addRoutes路由動態(tài)加載操作
這篇文章主要介紹了vue addRoutes路由動態(tài)加載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
基于Vuejs實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
在Vue3中實(shí)現(xiàn)虛擬列表的方法示例
文章主要介紹在 Vue3 中實(shí)現(xiàn)虛擬列表的方法,包括原理和代碼實(shí)現(xiàn),原理是只渲染可視區(qū)域內(nèi)的列表項(xiàng),通過設(shè)置子數(shù)據(jù)項(xiàng)高度、計算可視區(qū)域、渲染可視區(qū)域、滾動監(jiān)聽、設(shè)置緩沖列表項(xiàng)等提升性能,感興趣的小伙伴跟著小編一起來看看吧
2025-01-01
一文帶你了解vite對瀏覽器的請求做了什么
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vite對瀏覽器的請求做了什么的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12