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

未東興發布于2019-08-21 16:17 / 1704人閱讀

摘要：注意，在里面，代碼復用的主要形式和抽象是組件然而，有的情況下你仍然需要對純元素進行底層操作這時候就會用到自定義指令。注冊一個全局自定義指令當綁定元素插入到中。

混合是什么

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

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

我們會發現,兩個組件中的數據大多數相同,這是我們可以將它們進行混合

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

GPU云服務器云服務器自定義指令自定義指令實例自定義選擇組件定義方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88365.html

Vue 混合、自定義指令、插件

摘要：當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合自定義指令除了默認設置的核心指令和也允許注冊自定義指令。 vue的復用性與組合混合混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合 ...

whlong 2019-08-21 16:17 評論0 收藏0
Vue的混合、自定義指令和插件

摘要：可復用性和組合混合混合是一種分發組件中可復用功能的非常靈活的方式。官方例子定義一個混合對象定義一個使用混合對象的組件自定義指令允許自定義指令。可復用性和組合混合混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混合對象可以包含任意組件選項。以組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。 showImg(https://segment...

wwolf 2019-08-21 16:17 評論0 收藏0
vue.js學習和實戰筆記

摘要：第二個是其值是或，確認是否深入監聽。一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到第三個是其值是或，確認是否以當前的初始值執行的函數。混合定義來分發組件中的可復用功能結束，撒花文章已同步我的筆記，歡迎大家加，加后人生更加美好 vue.js記錄文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后...

Pandaaa 2019-08-23 12:10 評論0 收藏0
VUE2.0學習筆記

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
前端面試題總結——VUE（持續更新中）

摘要：前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。前端面試題總結——VUE（持續更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0