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

wwolf 發(fā)布于2019-08-21 16:17 / 2627人閱讀

摘要：可復(fù)用性和組合混合混合是一種分發(fā)組件中可復(fù)用功能的非常靈活的方式。官方例子定義一個(gè)混合對象定義一個(gè)使用混合對象的組件自定義指令允許自定義指令。

可復(fù)用性和組合 混合

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

在上面的例子中，我們創(chuàng)建了一個(gè)點(diǎn)擊彈出框和一個(gè)滑過彈出框，因?yàn)槠湔{(diào)用的數(shù)據(jù)和方法都是重復(fù)的，因此就定義一個(gè)混合對象，讓兩個(gè)不同的彈出框分別調(diào)用。

官方例子：

// 定義一個(gè)混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!")
    }
  }
}
// 定義一個(gè)使用混合對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

自定義指令

Vue允許自定義指令。

舉個(gè)例子，現(xiàn)在這里有個(gè)input輸入框，當(dāng)頁面加載時(shí)，輸入框就已經(jīng)獲取焦點(diǎn)，并將輸入框固定在視口的某一位置上：

Vue.directive("focus",{
    inserted:function(el){
        el.style.position="fixed";
        el.style.left="10px";
        el.style.top="10px";
        el.focus()
    }
})

這樣在模板中就可以使用了

插件 插件的開發(fā)

Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象:

var Myplugin={};
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或?qū)傩?  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive("my-directive", {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加實(shí)例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}

使用插件