Vuejs自定义事件十五

最新推荐文章于 2023-04-16 14:29:57 发布

米白蓝

最新推荐文章于 2023-04-16 14:29:57 发布

阅读量133

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124402708

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中父子组件间的通信方式，包括使用自定义事件、props传递函数以及$refs引用。同时，讲解了如何在子组件中使用$emit触发事件，以及在父组件中监听并响应这些事件。此外，还阐述了如何通过$off进行事件解绑，确保组件通信的准确性和效率。最后，提到了使用修饰符native绑定原生事件的方法。

摘要由CSDN通过智能技术生成

//App.vue组件
<template>
  <div class="app">
    <h2>{{ msg }}</h2>
    <h2>子组件传递过来的数据，{{studentName}}</h2>
    <School :getSchoolName="getSchoolName" />
    <!-- 使用$emit触发事件 -->
    <Student v-on:getStudentName="getStudentName" @demo="m1" @click.native="show"/>
    <!-- 使用ref属性得到该组件的实例对象 -->
    <!-- <Student ref="student" /> -->
  </div>
</template>

<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "你好呀！",
      studentName: ''
    };
  },
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(schoolName) {
      console.log("App组件获取到school名字", schoolName);
    },
    getStudentName(studentName) {
      console.log("获取了student名", studentName);
      this.studentName = studentName
    },
    m1() {
      console.log('回调第二个自定义事件');
    },
    show() {
      alert(123)
    }
  },
  mounted() {
    // this.$refs.student.$on('getStudentName',this.getStudentName)
  }
};
</script>

//Student.vue 子组件
<template>
  <div class="demo">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">传递学生名字</button>
    <button @click="undind">解绑事件</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data() {
    return {
      name: '张三',
      sex: '男'
    }
  },
  methods: {
    sendStudentName() {
      this.$emit('getStudentName',this.name);
      // this.$emit('demo')
    },
    undind() {
      this.$off('getStudentName')
      // this.$off(['getStudentName','demo'])
    }
  }
}
</script>

子组件传父组件：
- 在组件标签上绑定一个自定义事件@自定义事件 =“方法”，当触发自定义事件的时候，就会在该组件中调绑定了的方法；自定义事件在绑定的组件中使用$emit(‘自定义事件’，参数多个)的形式来触发；
- 子组件传父组件：也可以使用ref属性，通过在mounted钩子函数中使用 $r e f s . 属性值 .$ on(“自定义事件名”,实参)的形式来写，子组件依旧使用$emit触发事件；
- 子组件传父组件：也可以父组件发送一个函数，用props接受，子组件中调用该函数，可以实现子传父；
解绑自定义事件：
- 在子组件中使用$off(‘自定义事件名’)可以解绑一个自定义事件；
- 解绑多个自定义事件：$off([‘自定义事件1’,‘自定义事件2’])；
- 解绑所有的自定义事件：$off();
使用$destory()销毁当前的组件实例，销毁后所有的组件实例对象的自定义事件都全部不起效果了；
写$refs的自定义事件，它的回调函数中的this会是触发该自定义事件的组件，也就是子组件；
在组件上绑定原生事件需要使用修饰符native，否则vue会把它当做一个自定义事件来使用：@click.native=“show”;