Vue.js元件庫事件系統的設計過程（程式碼）

這篇文章帶給大家的內容是關於Vue.js元件庫事件系統的設計過程（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我們拿input-number 為例：

@ 是v-on 指令的簡寫，用來綁定事件監聽器：

<InputNumber @on-change="change" :max="10" :min="1" v-model="value1">
</InputNumber>

我們使用元件的時候，會註冊了一個自訂的事件：

methods: {
    change (v) {
        console.log(v)
    }
}

在元件內部觸發的方式也很簡單：

呼叫了$emit 來觸發目前實例上的事件，事件名為on-change

this.$emit('on-change', val);

那思路來了，如果InputNumber 外層嵌套在了某一個FormItem 元件裡面，事件之間的互相呼叫也是類似的，只是多了個假設：

嵌套關係，可能有多級父子

像element 和iview 多設計了一個mixins，裡面提供了一個方法：dispatch

#它接受3 個參數：

• componentName 元件名稱

• eventName     自我訂事件名稱

##eventName      事件傳遞的參數

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">dispatch(componentName, eventName, params) { }</pre><div class="contentsignin">登入後複製</div></div>例如類似input-number，很多這種表單內嵌的元件，都會設計和

FormItem

的互動：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.dispatch('FormItem', 'on-form-change', val);</pre><div class="contentsignin">登入後複製</div></div>我們在設計

FormItem

元件的時候，注意：

export default {
    name: 'FormItem'
}

然後註冊一個自訂事件，方式也是一樣的：

<Form-item @on-form-change="test">
</Form-item>

我們來看看dispatch 函數的內部：

想法是一層一層往上找父元素：
$parent -- 父實例
$root -- 元件樹的根Vue 實例

var parent = this.$parent || this.$root;

取得父元件的name:

var name = parent.$options.name;

開始循環判斷：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">while (parent &amp;&amp; (!name || name !== componentName)) {     // ... }</pre><div class="contentsignin">登入後複製</div></div>例如上面的input-number 內部呼叫了dispatch，傳入了參數，就是一直找父元素name 為

FormItem

的

在while 的內部：

#接著找它的父範例，然後取得name

parent = parent.$parent;
if (parent) {
    name = parent.$options.name;
}

最終如果找到了：

和最開始觸發自訂事件是一樣的：$emit

if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
}

相關推薦：
Vue.js元件的通訊之子元件向父元件的通訊（程式碼）

Vue.js行動裝置元件庫使用方法

######

以上是Vue.js元件庫事件系統的設計過程（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！