Vue-组件自定义事件

Posted 2022-01-01 奶茶丶

父组件使用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>