Vue学习（十五）组件的自定义事件

组件的自定义事件

组件自定义事件，在父组件给子组件传入的自定义事假，事件回调写在父组件中。子组件中触发自定义事件，并且传送数据给父组件

理解

一种组件间的通讯方式，适用于子组件向父组件传递数据

使用场景

子组件给父组件传数据，在父组件中给子组件绑定自定义事件（事件的回调在父组件中）

绑定自定义事件

1. 第一种写法：在父组件中写 <Demo @组件名称="回调函数名称" />或 <Demo v-on:组件名称="回调函数名称" />
2. 第二种写法：在父组件中写：

<Demo ref="demo">
......
// 配置mounted函数
mounted() {
   
    this.$refs.demo.$on("组件名", 回调函数名);
}

3. 使用once修饰符或 $once方法，使组件自定义事件只触发一次

触发自定义事件

在子组件中使用 this.$emit("组件名"， 数据)

解绑自定义事件

在子组件中使用 this.$off("组件名")解绑一个，this.$off(["组件名1", "组件名2", ...])解绑多个，this.$off()解绑全部

组件上绑定原生DOM事件

需要使用修饰符 native

注意

通过this.$refs.demo.$on("组件名", 回调函数名);绑定自定义事件，回调最好配置在methods中，要么用箭头函数**，否则会出现this指向问题

App组件

<template>
  <div class="app">
    <h1>{
   {
   msg}}{
   {
   studentName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现 子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义组件实现 子给父传递数据 （第一种写法，使用v-on:）-->
    <!-- <Student v-on:atguigu="getStudentName" /> -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->

  <!-- 通过父组件给子组件绑定一个自定义组件实现 子给父传递数据 （第二种写法，使用ref） -->
    <Student ref="student" @click.native="show"/>
    
  </div>
</template>

<script>
    // 引入School组件
    import School from './components/School.vue'
    import Student from './components/Student.vue'
    
    export default {
   
        name: "App",
        // 注册组件
        components: {
   Student, School},
        data() {
   
          return {
   
            msg: "你好啊！",
            studentName: ''
          }
        },
        methods: {
   
          getSchoolName(name) {
   
            console.log("App 收到了学校名称：" , name)
          },
          getStudentName(name) {
   
            console.log('App 收到了学校名称：', name);
            this.studentName = name;
          },
          m1() {
   
            console.log("自定义事件demo被触发了")
          },
          show() {
   
            alert("123");
          }
        },
        mounted() {
   
          // 绑定自定义事件
          this.$refs.student.$on("atguigu", this.getStudentName);
          /* setTimeout(()=> {
            this.$refs.student.$on("atguigu", this.getStudentName);
          }, 3000); */
        },
    }
</script>

<style>
  .app {