vue-组件的自定义事件

 组件的自定义事件

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。

3. 绑定自定义事件：

    （1）. 第一种方式，在父组件中：```<Demo @atguigu="test"/>```  或 ```<Demo v-on:atguigu="test"/>```

     （2）. 第二种方式，在父组件中：

        ```js

        <Demo ref="demo"/>

        ......

        mounted(){

           this.$refs.xxx.$on('atguigu',this.test)

        }

        ```

    （3）. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。

4. 触发自定义事件：```this.$emit('atguigu',数据)```    

5. 解绑自定义事件```this.$off('atguigu')```

6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。

7. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！

school.vue

<template>
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="sendSchoolName">把学校名给App</button>
  </div>
</template>
 
<script>
export default {
  name: "School",
  props:['getSchoolName'],
  data() {
    return {
      name: "华立",
      address: "广州",
    };
  },
  methods: {
    sendSchoolName() {
        this.getSchoolName(this.name)
    },
  },
};
</script>
<style scoped>
.demo {
  background-color: skyblue;
}
</style>

student.vue

<template>
  <div class="demo">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>当前求和为：{{ number }}</h2>
    <button @click="add">点我number++</button><br />
    <button @click="sendStudentName">把学生名给App</button><br />
    <button @click="unbind">解绑huali事件</button><br />
    <button @click="death">销毁当前Student的组件实例对象</button>
  </div>
</template>
 
<script>
//引入一个hunhe

export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    add() {
      this.number++;
      console.log("add回调被调用了");
    },
    sendStudentName() {
      //触发Student身上的绑定事件huali
      this.$emit("huali", this.name, 333, 4444, 666);
      /*  this.$emit("student", this.name); */
      this.$emit("demo");
    },

    unbind() {
      //this.$off('huali')//只适用解绑一个事件
      //this.$off(['huali','demo'])//解绑多个自定义事件
      this.$off(); //解绑所有自定义事件
    },
    death() {
      this.$destroy(); //销毁了当前Student组件的实例对象，销毁后所有student实例的自定义事件都不奏效了
    },
  },
};
</script>
<style scoped>
.demo {
  background-color: pink;
}
</style>

App.js

<template>
  <div>
    <h2>{{ msg }}</h2>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <hr />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@或v-on) -->
    <Student @huali="getStudentName" @demo="m1"/>

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法，使用ref) -->
    <!-- <Student ref="student" /> -->
  </div>
</template>
 
<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: { Student, School },
  data() {
    return {
      msg: "你好啊！",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名:", name);
    },
    getStudentName(name,...params) {
      console.log("App收到了学生名:", name,params);
    },
    m1(){
      console.log("demo事件触发了！")
    }
  },
  mounted() {   
    //绑定自定义事件
      /* this.$refs.student.$on("student", this.getStudentName); */
      //绑定自定义事件(一次性)
      /* this.$refs.student.$once("student", this.getStudentName); */
  },
};
</script>
<style>
body {
  background-color: gray;
}
</style>