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

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

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

混合是什么

混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式?；旌蠈ο罂梢园我饨M件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

例如:

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時,我們可以直接在組件內定義,他會覆蓋mixin的data
var tpl1={
  template:'#stpl1',
  minins:[mymixin],
  data:function(){
    msg:true
  }
}

自定義指令

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

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

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

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

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

<input v-focus>

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

您可能感興趣的文章:

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