Vue自定义事件与组件使用原生事件

1. 一种组件间的通信方式，适用于：子组件 ===> 父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的定义与回调在A中）。 
3. 绑定自定义事件：
   1. 在父组件中：<Student @xin="incident"/>或者<Student v-on:xin="incident"/>
   2. 在父组件的某个方法中：this.$refs.Student.$on("Student",this.incident);
   3. 若想让自定义事件只能触发一次，可以使用once修饰符或$once方法。
4. 触发自定义事件，在子组件的某个方法中调用：this.$emit("xin",参数)
5. 解绑自定义事件，在子组件的某个方法中调用：

   1. this.$off("xin");   删除指定事件

   2. this.$off(["xin","xxx","xxx"]);  删除多个事件

   3. this.$off();   删除所有事件

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

   1. 例如：<Student @click.native="incident"/>

7. 注意：通过this$refs.xxx.$on('incident',回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this执行会指向调用的函数。

 参考

App.vue

<template>
  <div>
    <h1>学校名称：{{ name }}</h1>
    <Student ref="Student" @xin="incident"/>
  </div>
</template>

<script>
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    Student,
  },
  data() {
    return {
      name: "希望",
    };
  },
  methods: {
    addEvent(){
      //通过ref的形式给Student传递参数
      //this.$refs.Student.$on("Student",this.incident);
    },
    incident(...params) {
      console.log("111111111111111", params);
      this.name = params[0];
    },
  },
};
</script>

Student.vue

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年纪：{{age}}</h1>
    <button @click="age++">点击我曾加数量</button>
    <button @click="clickEvent">点击触发事件</button>
    <button @click="cancel">点击取消事件</button>
  </div>
</template>

<script>
export default {
    name:"Student",
    data(){
        return {
            name:"李义新",
            age:10
        }
    },
    methods:{
        clickEvent(){
            console.log("clickEvent触发了");
            this.$emit("xin","希望小学");  //触发事件，第二个参数及后面的参数是事件调用方法的参数
        },
        cancel(){
            this.$off("xin");   //删除指定事件
            this.$off(["xin","xxx","xxx"]);   //删除多个事件
            this.$off();        //删除所有事件
        }
    }
}
</script>