【温故而知新】vue组件间通信的实现方式

2023-12-27 12:31:31

概念

Vue组件间通信的实现方式有以下几种:

  1. 父子组件通信:父组件可以通过props属性将数据传递给子组件,子组件可以通过$emit方法触发父组件定义的事件。
  2. 子组件访问根组件:可以使用provide/inject来实现子组件访问根组件的数据。
  3. 兄弟组件通信:可以通过一个共同的父组件作为中间媒介,将数据传递给兄弟组件。
  4. 使用Vuex:Vuex是Vue的状态管理库,可以集中管理组件之间的共享状态。通过mutations和actions修改和访问状态。
  5. 使用事件总线:可以创建一个Vue实例作为事件总线,组件间通过$ emit和$ on方法来发布和订阅事件。
  6. 使用$ refs访问子组件:可以通过给子组件设置ref属性,然后通过this.$ refs来访问子组件的方法和数据。
  7. 使用$ parent和$ children:可以通过this.$ parent来访问父组件的数据和方法,通过this.$ children来访问子组件列表。
  8. 使用provide/inject:类似于子组件访问根组件,但是可以在更深层次的组件中传递数据。
  9. 使用$ attrs和$ listeners:$ attrs包含父组件传递的所有属性,$ listeners包含所有父组件传递的事件监听器。

案例

一些常见的Vue组件间通信的实现方式及相应的案例代码:

  1. 父子组件通信:

父组件向子组件传递数据:

// Parent.vue
<template>
  <div>
    <Child :message="

文章来源:https://blog.csdn.net/xuaner8786/article/details/135240848
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。