Vue：（二十八）组件的自定义事件

置顶空谷有来人

于 2023-02-14 16:24:59 发布

阅读量463

点赞数 2

分类专栏： Vue 前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/129029030

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

今天来学习一下自定义组件的知识，老套路，先上一波理论。

一种组件间通信的方式，适用于：自组建===>父组件

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

绑定自定义事件：

第一种方式，在父组件中：<Demo @konggu="test"/>或<Demo v-on:konggu="test"/>

第二种方式，在父组件中：

<Demo ref = "demo"/>
......
mounted(){
    this.$refs.xxx.$on('konggu',this.test)
}

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

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

解绑自定义事件：this.$off('konggu')

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

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

理论完了之后就是代码环节了，因为验证的场景比较多，这里就不一一截图了，直接把所有的场景的源码贴上，需要的自取。

App.vue

<template>
  <div class="app">
    <h1>{{ msg }},学生姓名：{{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on） -->
    <!-- <Student @konggu="getStudentName" @demo="m1" /> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
  //引入组件
  import School from './components/School.vue'
  import Student from './components/Student.vue'

  export default {
    name: 'App',
    data() {
      return {
        msg: '你好啊',
        studentName: '',
      }
    },
    components: {
      School,
      Student,
    },
    methods: {
      getSchoolName(name) {
        console.log('App收到了学校名：', name)
      },
      getStudentName(name, ...params) {
        console.log('App收到了学生名:', name, params)
        this.studentName = name
      },
      m1() {
        console.log('App收到了m1')
      },
      show() {
        alert(123)
      },
    },
    mounted() {
      // 绑定自定义事件
      // setTimeout(() => {
      //   this.$refs.student.$on('konggu', this.getStudentName)
      // }, 3000) //等待3秒再发送
      // this.$refs.student.$once('konggu', this.getStudentName) //只触发一次
      // this.$refs.student.$on('konggu', this.getStudentName)
    },
  }
</script>
<style>
  .app {
    background-color: gray;
    padding: 5px;
  }
</style>

School.vue

<template>
  <div class="school">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
    <button @click="sendSchoolName">点我发送学校名</button>
  </div>
</template>

<script>
  export default {
    name: 'SchoolVue',
    props: ['getSchoolName'],
    data() {
      return {
        name: '西航',
        address: '西安',
      }
    },
    methods: {
      sendSchoolName() {
        this.getSchoolName(this.name)
      },
    },
  }
</script>

<style>
  .school {
    background-color: blue;
    padding: 5px;
    margin-top: 30px;
  }
</style>

Student.vue

<template>
  <div class="student">
    <h1>学生姓名：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <button @click="sendStudentName">点我发送学生名</button>
    <button @click="unbind">解绑konggu事件</button>
    <button @click="death">点我销毁Student实例对象</button>
  </div>
</template>

<script>
  export default {
    name: 'StudentVue',
    data() {
      return {
        name: '空谷有来人',
        age: 19,
      }
    },
    methods: {
      sendStudentName() {
        this.$emit('konggu', this.name, 555, 666, 888)
        this.$emit('demo')
      },
      unbind() {
        // this.$off('konggu') //解绑一个自定义事件
        // this.$off(['konggu', 'demo']) //解绑多个自定义事件
        this.$off() //解绑所有的自定义事件
      },
      death() {
        this.$destroy() //销毁后所有Student实例的自定义事件全都不奏效
      },
    },
  }
</script>

<style>
  .student {
    background-color: green;
    padding: 5px;
    margin-top: 30px;
  }
</style>

好了，以上就是Vue中自定义事件的定义、绑定、解绑，以及验证的场景

我是空谷有来人，谢谢支持！