事件修饰符
针对dom节点的原生事件,vue支持多种修饰符以简化代码
$listeners
$listeners是vue的一个实例属性,它用于获取父组件传过来的所有事件函数
<!-- 父组件 --><Child@event1="handleEvent1"@event2="handleEvent2" />
// 子组件this.$listeners// { event1: handleEvent1, event2: handleEvent2 }
$emit和$listeners通信的异同
相同点:均可实现子组件向父组件传递消息
差异点:
$emit更加符合单向数据流,子组件仅发出通知,由父组件监听做出改变;而$listeners则是在子组件中直接使用了父组件的方法。
调试工具可以监听到子组件$emit的事件,但无法监听到$listeners中的方法调用。(想想为什么)
由于$listeners中可以获得传递过来的方法,因此调用方法可以得到其返回值。但$emit仅仅是向父组件发出通知,无法知晓父组件处理的结果
对于上述中的第三点,可以在$emit中传递回调函数来解决
click exportdefault{methods:{handleClick(){this.$emit("click",123, (data)=>{console.log(data);//data为父组件处理完成后得到的数据 }) } } }
v-model
v-model指令实质是一个语法糖,它是value属性和input事件的结合体
<input:value="data"@input="data=$event.target.value" /><!-- 等同于 --><inputv-model="data" />
详见:表单输入绑定