Vue-组件自定义事件

父组件使用props传递数据给子组件，子组件给父组件通信除了通过父组件提前给子组件传递一个函数，子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中，

这里再提供一种方法：Vue的自定义事件，本文将详细介绍Vue自定义事件

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

绑定自定义事件的方式

                                                                ❤️  第一种方式 ❤️

在父组件中：

<Student  @atguigu ='test' />   或  <Student  v-on:atguigu = 'test'>

methods:{ 

       //除了接受第一个参数，其他参数都放在数组里面

       test(name, ...params) {.....}  

}

                                                                ❤️  第一种方式 ❤️

在父组件中：

<Student ref ='demo'  />  

methods:{ 

       //除了接受第一个参数，其他参数都放在数组里面

       test(name, ...params) {.....}  

}

mounted() {  

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

} 

 子组件触发自定义事件

 this.$emit('atguigu',this.name, this.sex, 800)

// 子组件触发自定义事件的时候可以传递多个参数

解绑自定义事件

❤️   解绑一个自定义事件：this.$off('atguigu')

❤️   解绑多个自定义事件：this.$off(['atguigu', 'demo'])

❤️   解绑所有的自定义事件：this.$off()

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

<Student ref = "student" @click.native="show">

注意事项：

通过this.$ref.xxx.$on('atguigu',回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题 

完整案例

App.vue父组件

<template>
  <div class="bgq">
    <h1>{{ atguigu }}-{{studentname}}</h1>
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第一种写法使用@)添加once的话就是只触发一次@atguigu.once -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第二种写法使用ref) -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: { Student },
  data() {
    return {
      atguigu: "你好啊",
      studentname: "",
    };
  },
  methods: {
    getStudentName(name, ...params) {
      //除了接受第一个参数，其他参数都放在数组里面
      console.log("收到了学生的名字", name, params);
      this.studentname = name;
    },
    m1() {
      console.log("demo被触发了");
    },
    show(){
      alert('我是被绑定在组件上面的原生的DOM事件')
    }
  },
  mounted() {
    //绑定自定义事件
    //3秒后出发
    // setTimeout(() => {
    //   this.$refs.student.$on("atguigu", this.getStudentName);
    // }, 3000);
    //正常触发
    this.$refs.student.$on("atguigu", this.getStudentName);
    //只触发一次
    // this.$refs.student.$once("atguigu", this.getStudentName);
  },
};
</script>

<style scoped>
.bgq {
  background-color: skyblue;
  padding: 5px;
}
</style>

Student.vue子组件

<template>
  <div class="bg">
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>number: {{ number }}</h2>
    <button @click="add">点我number子加</button>
    <button @click="sendStudentName">点我获得学生的姓名</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="dath">点我摧毁Student组件的饿实例对象vc</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    //原生dom事件增加
    add() {
      console.log(
        "我是原生DOM事件，即使Student组件被摧毁了，我还是会调用，但是页面不会输出"
      );
      this.number++;
    },
    sendStudentName() {
      //触发student组件实例身上的auguigu事件 传递多个参数
      this.$emit("atguigu", this.name, this.sex, 800);
      //触发damo事件
      this.$emit("demo");
    },
    unbind() {
      //解绑atguigu事件，只能解绑一个自定义事件
      // this.$off('atguigu')
      //解绑多个自定义事件
      this.$off(["atguigu", "demo"]);
      //解绑所有的自定义事件
      // this.$off();
    },
    dath() {
      //摧毁了stedent的实例对象vc，摧毁后所有的Student身上的自定义事件不起效果
      this.$destroy();
    },
  },
};
</script>

<style scoped>
.bg {
  background-color: plum;
  padding: 5px;
  margin-top: 10px;
}
</style>