Vue组件自定义事件

JS本身自带的click、keyup、mouseout等等都是内置事件。都是给html元素使用的。

自定义事件是给组件使用的，适用于子组件给父组件传递数据

子组件给父组件传递数据的2种方式：

第一种方式：通过props

第二种方式：通过自定义事件

通过props实现子组件给父组件传递数据

实现步骤：

1. 首先在父组件的methods里面定义一个函数（需要接收一个参数），给子组件标签绑定这个函数
2. 在子组件通过props声明接收这个函数，并定义click一个事件
3. 在子组件的methods里面书写事件函数，调用父组件绑定的函数，并通过参数传递数据

代码示例：

APP组件代码：

 //2.给子组件绑定函数  
    <School :getSchoolName="getSchoolName"/>
 
    //1.定义一个接收参数的函数
    methods: {
        getSchoolName(name){
        console.log('app收到了学校名',name)
        }
   }

子组件代码：

//2.定义一个click事件
  <button @click="sendSchoolName">把学校名字给app</button>
 
  //1.声明接收父组件函数
  props:['getSchoolName'],
 
  //3.调用事件函数并传参
  methods: {
    sendSchoolName(){
      this.getSchoolName(this.name)
    }
}

通过自定义事件实现子组件给父组件传递数据

绑定自定义事件的两种方式：使用v-on或者使用ref

v-on绑定

实现步骤：

1. 首先给子组件标签通过v-on：自定义事件名字=“函数名”，绑定一个函数，接着在父组件的methods里面定义这个函数（需要接收一个参数）
2. 在子组件中，首先定义一个click事件，接着在methods内书写click事件函数，在其内部通过$this.$emit（）去触发APP组件里面的自定义事件，括号内的第一个参数是自定义事件名字，后面的参数是数据，（注意：给哪个子组件绑定自定义事件就去哪个子组件去触发这个事件）
3. 在子组件的methods里面定义触发这个函数的函数，通过this.函数名括号传数据

代码示例：

APP组件代码：

//2.给子组件的自定义事件绑定函数,“self”即为自定义的事件
    <Student @self="incident"/>
 
    //1.定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
}

子组件代码

//1.定义一个click事件
  <button @click="sendStudentName">把学生名字给app</button>
 
  //2.调用事件函数，通过this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
}

ref绑定

实现步骤：

1. 首先在父组件中给子组件标签使用ref绑定，让我们可以获得组件的实例对象。
2. 在父组件中，添加配置项mounted（），里面使用this.$refs.实例对象.$on(‘自定义属性名’，this.接收数据的函数名)
   即给实例对象的自定义事件绑定函数
3. 子组件里面的代码不改变
   代码示例：

APP组件代码：

    //1.给子组件绑定ref  
    <Student ref="student"/>
 
    //3.定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
    }

    //2.通过refs获取到实例对象，给实例绑定自定义事件
    mounted() {
      this.$refs.student.$on('self',this.incident)
    }

子组件代码：

  //1.定义一个click事件
  <button @click="sendStudentName">把学生名字给app</button>
 
  //2.调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
  }

解绑自定义事件

• 解绑一个自定义事件：this.$off(‘自定义事件名’)
• 解绑多个自定义事件：this.$off([‘自定义事件名1’,‘自定义事件名2’])
• 解绑所有的自定义事件：this.$off()