自定义事件的声明
$emit('事件名称', 需要传递的参数 )
// click点击事件的本质(vue是怎么操作的) $emit('click', { clientX: '', clientY: '', target: dom元素 }) ------------------------------------------------------------ // eg: // 子组件通过定义事件child-msg的方式将msg传给父组件 // 子组件中有个button按钮，并为其添加click事件 <template> <button @click="deliver"></button> </template> <script> export default { data(){ return { msg: '我是子组件的数据' } }, methods: { // 按钮点击事件的处理函数 // 当点击的时候使用$emit()触发事件，把message传给父组件 deliver(){ this.$emit('child-msg', this.msg) } } } </script> --------------------------------------------------------------- // 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件 <template> <Son @child-msg="getChildMsg"></Son> </template> <script> export default { data(){ return { message: '' // 设置message来接收子组件的数据 (这里的值类型得根据需要传递的类型写) } }, methods: { // 通过回调函数来接收数据 getChildMsg(val){ // 定义形参val接收数据 this.message = val // 将子组件传过来的数据转存到父组件 } } } </script>
事件的绑定除了可以在标签中通过v-on绑定之外，还可以通过ref属性获取到相应的元素，然后在生命周期钩子mounted( )中通过this.refs.xxx.refs.xxx.refs.xxx.on('事件名称', 回调函数) 进行绑定 。
注意此时的回调函数必须写在当前组件的methods节点中，或者使用箭头函数，这样回调函数的this才会指向当前组件的实例对象，才能操作到当前组件里面的data。
若直接在$on( )方法中声明回调函数，则里面的this指向的是事件的触发者，即绑定事件的那个组件实例对象或者DOM元素
事件的解绑
this.$off('事件名')解绑一个自定义事件
this.$off(['事件1', '事件2']) 解绑多个自定义事件
this.$off( )解绑所有的自定义事件(不传递参数)
注意
- 在生命周期钩子中的销毁阶段，使用$destroy( )销毁组件实例，则它身上所有的自定义事件都会失效，但是原生的DOM事件仍然有效
- 在组件上也可以绑定原生DOM事件，但是需要在绑定的时候加上native修饰符
<Children @click.native="show"></Children>
