Vue.jsコンポーネントライブラリイベントシステムの設計プロセス（コード）

この記事の内容は、Vue.js コンポーネント ライブラリ イベント システムの設計プロセス (コード) に関するもので、必要な方は参考にしていただければ幸いです。

input-number を例に挙げてみましょう:

@ は v-on 命令の略称で、イベント リスナーをバインドするために使用されます:

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

コンポーネントを使用するときは、custom を登録します。のイベント: 自定义的事件：

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

在组件内部触发的方式也很简单：

调用了 $emit 来触发当前实例上的事件，事件名为 on-change

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

那思路来了，如果 InputNumber 外层嵌套在了某一个 FormItem 组件里面，事件之间的互相调用也是类似的，只是多了个假设：

嵌套关系，可能有多级父子

像 element 和 iview 多设计了一个 mixins，里面提供了一个方法：dispatch

它接受 3 个参数：

• componentName 组件名

• eventName     自定义事件名称

• params        事件传递的参数

dispatch(componentName, eventName, params) {
}

比如类似 input-number，很多这种表单内嵌的组件，都会设计和 FormItem 的互动：

this.dispatch('FormItem', 'on-form-change', val);

我们在设计 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;

开始循环判断：

while (parent && (!name || name !== componentName)) {
    // ...
}

比如上面的input-number 内部调用了 dispatch，传入了参数，就是一直找父元素 name 为 FormItem

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

コンポーネント内でトリガーする方法も非常に簡単です:

$emit を呼び出して現在のインスタンスでイベントをトリガーします。イベント名は on- <code>InputNumber の外側の層が特定の FormItem コンポーネントにネストされている場合、イベント間の相互呼び出しは似ていますが、ここでアイデアが生まれます。は追加の仮定です。

ネストされた関係、複数のレベルの親と子が存在する可能性があります

element と iview のように、もう 1 つの mixins があります。メソッドを提供するように設計されています: dispatch

3 パラメータを受け入れます:

• componentName コンポーネント名

• eventName カスタム イベント名

• params イベントによって渡されるパラメータ

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

たとえば、input-number には、そのようなフォームの多くが埋め込まれています。 コンポーネントは、<code>FormItem と対話するように設計されます:
rrreee FormItem コンポーネントを設計するときは、次のことに注意してください:

rrreee 次に、登録します同じ方法でカスタム イベントを作成します: rrreee

ディスパッチ関数の内部を見てみましょう:

そのアイデアは、レイヤーごとに親要素を見つけることです: 🎜

• 🎜$parent -- 親インスタンス 🎜
• 🎜$root -- コンポーネント ツリーのルート Vue インスタンス 🎜

rrreee🎜 親コンポーネントの名前を取得します: 🎜rrreee🎜 ループ判定の開始: 🎜rrreee🎜 たとえば、上記の input-number は内部で dispatch を呼び出し、パラメータを渡します。親要素 name を探し続けます。 > それは FormItem です。 while 内: 🎜🎜次にその親の例を探し、名前を取得します 🎜rrreee🎜最後に見つかった場合: 🎜🎜これはカスタムの最初のトリガーと同じですイベント: $emit🎜rrreee🎜関連する推奨事項: 🎜🎜🎜Vue.js コンポーネントの通信子コンポーネントから親コンポーネントへの通信 (コード)🎜🎜🎜🎜🎜Vue.js モバイル コンポーネント ライブラリの使用方法🎜🎜🎜🎜

以上がVue.jsコンポーネントライブラリイベントシステムの設計プロセス（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。