Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布

最新推荐文章于 2024-07-04 10:01:18 发布

嘤嘤鸭

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量546

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43427995/article/details/128076139

版权

本文介绍了Vue组件化的编码流程，详细讲解了组件的自定义事件如何绑定和解绑，以及全局事件总线（GlobalEventBus）的实现，用于任意组件间的通信。此外，还探讨了使用pubsub-js库进行消息订阅与发布的机制，强调了组件销毁时解绑事件的重要性。

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

组件化编码流程案例

组件化编码流程

实现静态组件：抽取组件，使用组件实现静态页面效果
展示动态数据
1. 数据的类型、名称是什么
2. 数据保存在哪个组件里
交互——从绑定事件监听开始

一个data或者函数等…一个组件在用放在组件自身即可，一些组件在用放在他们共同的父组件上（状态提升）

组件的自定义事件

一种组件间通信方式，适用于子组件===>父组件
- 在父组件中给子组件绑定了自定义事件，子组件触发自定义事件。
组件上绑定的事件默认为自定义事件，如果要绑定原生DOM事件那么需要使用native修饰符
如果只想让事件触发一次那么可以使用once修饰符或$once方法
通过 this.$refs.xxx.$on('自定义事件名’回调函数)绑定自定义事件的时候回调函数要使用箭头函数或者是配置在methods中，这样this才能指向APP，否则this指向xxx

绑定自定义事件

第一种绑定方法

<Student @sendMsg=“getStudentName”/>

当触发了sendMsg事件之后直接执getStudentName回调函数
在Student组件中通过 this.$emits.('sendMsg',this.name)触发该事件并且把name作为参数传递给回调函数getStudentName

APP.vue

<template>
  <div>
      <h2>{
  {msg}},{
  {StuName}}</h2>
      <School @getSchoolName.once="getSchoolName"/>
      <Student ref="student"/>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {