一、自定义事件使用
在Search组件(父)中:
<!-- 给子组件绑定自定义事件 -->
<SearchSelector @trademarkInfo="trademarkInf" />
// 自定义事件的回调
trademarkInf(trademark){
console.log(trademark);
}
在SearchSelector组件(子)中:
// 品牌的点击事件
tradeMarkHandler(trademark){
// 触发自定义事件,传递trademark给父组件
this.$emit('trademarkInfo', trademark);
}
二、自定义事件深入
事件:系统事件 click、双击、鼠标系列等等;自定义事件
事件源、事件类型、事件回调
1:原生DOM----button可以绑定系统事件----click单机事件等等。
2:组件标签----<event1 @click="handler"></event1>可以绑定系统事件(不起作用:因为属于自定义事件)----<event1 @click.native="handler"></event1>(加上.native修饰符可以把自定义事件变为原生DOM事件)。
原理:@click.native,可以把自定义事件变为原生DOM事件。当前原生DOM的click事件其实是给子节点的根节点<div></div>绑定了点击事件----利用到事件委派。
<button @xxx="handler2">原生DOM绑定自定义事件</button>----没有意义,因为没有办法触发$emit函数