组件自定义事件

133 阅读1分钟

组件自定义事件

区别于JS内置事件(click、keyup、mouseinter...)是给HTML元素使用的 自定义是自己定义的全新的事件,给组件使用的,

首先回顾(子组件==>父组件)传递数据的props方法

使用propos方法:父组件提前给子组件准备一个函数,把函数传给子组件,子组件使用props接收,添加点击事件button按钮,子组件在合适的时候调用函数即可。

自定义方法:

  1. 通过父组件给子组件绑定一个自定义事件实现子组件传递父子间的通信 v-on:zhang="XXX"/@zhang="XXX",实际上是给组件标签的实例对象Vuecomponent上绑定事件,在父组件配置XXX,给谁绑定事件就给谁触发,添加绑定事件button按钮,配置绑定方法,this.$emit("zhang")
  2. 通过父组件给子组件绑定一个自定义事件实现子组件传递父组件间的通信 ref="student",mountent(){this.$ref.student.$on("student",this.test)}
  3. 若想让自定义事件只触发一次,可以使用once修饰符或者$once方法
  4. 触发自定义事件this.$emit("zhang",数据)
  5. 解绑自定义事件:this.$off("zhang")
  6. 组件可以绑定原生的DOM事件,需要使用native修饰符
  7. 注意:通过 this.refs.xxx.refs.xxx.on("zhang',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题
  8. 通过给子组件绑定事件,父组件methods回调,子组件触发时携带着组要传递的属性
  9. 当一个组件被销毁了,组件的实例化对象vuecomponent身上的自定义事件也将不会生效,原生事件不会受影响