我们拿 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 自定义事件名称
- 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
的
在 while 的内部:
接着找它的父示例,然后获取 name
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
最终如果找到了:
和最开始触发自定义事件是一样的:$emit
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}