21-绑定自定义事件

绑定自定义事件

利用自定义事件获取子组件的值

父组件给子组件绑定一个自定义事件，实际上是绑定到了子组件的实例对象vc上：

<Student v-on:myEvent='getStudentName'/>

在父组件中编写getStudentName的实现：

getStudentName(name) {
    console.log(`学生名称是：${name}`)
}

在子组件Student中利用$emit触发组件实例对象上的事件

自定义事件可以像普通事件一样使用简写形式:

<Student @myEvent='getStudentName'/>

父组件中给子组件实例对象绑定自定义事件的另一种写法：

如果想让绑定的事件只触发一次，两种写法：

第一种写法：

<Student @myEvent.once='getStudentName'/>

第二种写法：

this.$refs.student.$once('myEvent', this.getStudentName)

绑定的事件函数可以传递多个值：

getStudentName(name,a,b,c) {
    console.log(`学生名称是：${name}`)
}

触发事件时也传入多个值即可：

this.$emit('myEvent', this.name, 1, 2, 3)

解绑自定义事件

在子组件使用使用$off解绑自定义事件：

this.$off('myEvent')  // 解绑一个自定义事件

解绑多个自定义事件：需要传如一个数组

this.$off(['myEvent', 'myEvent2']) // 解绑多个

解绑所有自定义事件：

this.$off()  // 解绑所有自定义事件

当组件实例被销毁时，实例上的所有自定义事件全都失效。

this.$destroy();

自定义事件回调函数的this

第一种情况：

在methods中定义回调函数，在绑定事件时填写回调函数名称。因为methods中的回调函数的this指向的是当前组件，所以此处指向的是当前组件。

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  methods: {
    getStudentName(name) {
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的是当前组件
    }
  },
  mounted() {
    this.$refs.student.$on('myEvent', this.getStudentName)  // 在methods中定义回调函数，此处只写回调函数名称
  },
}

第二种情况：

直接在绑定自定义事件时定义回调函数，此时回调函数体内的this指向的是触发该自定义事件的子组件。

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  mounted() {
    // 直接在绑定自定义事件时定义回调函数，且回调函数不是箭头函数
    this.$refs.student.$on('myEvent', function (name){
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的是触发该事件的子组件
    })  
  },
}

第三种情况：

直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法。

原本此处的函数体内的this应该指向触发该自定义事件的子组件，但是因为箭头函数没有this，所以向外找到了mounted的this，即指向了当前组件

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  mounted() {
    // 直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法
    this.$refs.student.$on('myEvent', name => {
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的当前组件
    })  
  },
}

组件上使用原生事件

在组件上直接使用原生事件时，默认也会被当做自定义事件：

<Student @click='getStudentName'/>

此时，vue会将Student组件上的click事件也当做自定义事件，需要在Student组件中使用$emit触发才能使用。

如果要在组件上声明这个事件时一个原生事件，需要使用修饰符：

<Student @click.native='getStudentName'/>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！