1、Directive 自定義指令

在 vue 框架下的程式碼中，很少用到原生 DOM 操作，那是因為在 Vue 中將原生 DOM 操作都封裝成了指令，例如我們前面見到的 <div v-text="xxx"></div> 指令，其實其內部操作就是：

div.innerText = xxx; //當然這裡的 div 是獲取得來的 DOM 元素

Vue 將原生 DOM 操作封裝成指令，那個元素想使用該指令，直接在 HTML 模板中的元素標籤中當作屬性使用就行，簡介方便，減少重複。

但是 Vue 畢竟不能把所有 DOM 操作情況都提前考慮進去封裝成對應指令，有些 DOM 操作還得開發者在實際中用到時才知道，因此 Vue 便提供了使用者自定義指令的方式，大致分為如下兩種：

自定義指令和自定義元件類似，也分為全域性和區域性，下面以自定義一個列印字元 y 的指令 v-y為例講解：

全域性指令

全域性屬性就是在 Vue 提供的特定函式中註冊：

Vue.directive("y",{
  inserted: function(el) {
    el.addEventListener("click",() => console.log("y"));
  }
});

區域性指令

只能用在定義該指令的 template 裡

可以是完整版的 template 屬性裡

main.js

new Vue({
  template:`
    <div v-y>
      <button>點選</button>
    </div>
  `,directives:{
    'y':{
      inserted: function(el) {
        el.addEventListener("click",() => console.log("y"));
      }
    }
  }
}).$mount("#app");

或者是非完整版的 .vue 檔案的 export default{}裡

app.vue

<template>
    <div>
      <button v-y>點選</buttonwww.cppcns.com>
    </div>
</template>
<script>
    export default {
      directives:{
        'y':{程式設計客棧
          inserted: function(el) {
            el.addEventListener("click",() => console.log("y"));
          }
        }
      }
    };
</script>

directiveOptions

指令物件裡有5個函式屬性

{
    bind: function (el,info,vnode,oldVnode) {},//元素建立在記憶體中時執行
    inserted: function (引數同上) {},//元素插入頁面時執行
    update: function (引數同上) {},componentUpdated: function (引數同上) {},unbind: function (引數同上) {} //元素消失時執行
}

函式屬性的引數中 el 是指呼叫該指令的元素，info 包含了所有資訊，需要時就在 info 中找

2、Mixin 混入

混入的主要目的是為了減少構造選項的重複，可將重複的構造選項的部分抽離出來放到一個單獨的 *.js 檔案中，然後用 import 匯入，再在構造選項中通過 mixins 屬性混入。

minxin 是智慧混合，會根據新增的混入和當前的選項進行智慧混合，而不是單純的複製。

3、Extends 繼承

繼承和 minxin 功能差不多，但 extend 更抽象些，二者都是對構造選項的重複進行簡化，extend 可以在原有 Vue 的空殼基礎上加上自己的定義屬性作為固定屬性，然後在建立 Vue 物件時使用建立繼承了 Vue 的自定義類 MyVue。

MyVue.js

const MyVue = Vue.extend({
    minxins: [log]
});

export default MyVue;

4、provide 和 inject

父代提供共用資料或方法

{
    //...
  www.cppcns.com  provide(){
        return {
            xx: this.changexx,yy: this.changeyy
        }
    },程式設計客棧   methods:{
        changexx(){
            //...
        },changeyy(){
            //...
        }
    }
}

後代注入東西對資料修改

{
    inject: ["changexZljiovXKVx","changeyy"]
}

和 .sync 修飾符的作用有點像，但比 .sync 要廣泛。

以上就是詳解Vue進階構造屬性的詳細內容，更多關於Vue進階構造屬性的資料請關注我們其它相關文章！