1. Toy模板网首页
  2. > Toy博客

VUE组件间通信的七种方式

10月前 作者：宝子向前冲 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了VUE组件间通信的七种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

1、 props / $emit

（1）父组件向子组件传值（props的用法）

（2）子组件向父组件传递数据（$emit的用法）

2、ref / $refs

用法：

3、eventBus事件总线（$emit / $on）

（1）创建事件中心管理组件之间的通信

（2）发送事件假设有两个兄弟组件

firstCom和secondCom的父组件：

在firstCom组件中发送事件：

（3）接收事件

4、依赖注入（provide / inject）

用法

5、$parent / $children

用法

注意

6、$attrs / $listeners

$attrs / $listeners的用法：

7、Vuex 状态管理器

总结

1、父子组件间通信

2、跨代组件间通信

3、兄弟组件间通信

4、任意组件间通信

1、 props / $emit

父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信

（1）父组件向子组件传值（props的用法）

props的特点：

props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。 props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以是传递一个函数。 props属性名规则：若在props中使用驼峰形式，模板中标签需要使用短横线的形式来书写。 用法：

父组件：

 // 父组件
 <template>
     <div id="father">
         <son :msg="msgData" :fn="myFunction"></son>
     </div>
 </template>
 <script>
 import son from "./son.vue";
 export default {
     name: father,
     data() {
         msgData: "父组件数据";
     },
     methods: {
         myFunction() {
             console.log("vue");
         }
     },
     components: {
         son
     }
 };
 </script>

子组件：

 // 子组件
 <template>
     <div id="son">
         <p>{{msg}}</p>
         <button @click="fn">按钮</button>
     </div>
 </template>
 <script>
 export default {
     name: "son",
     props: ["msg", "fn"]
 };
 </script>
（2）子组件向父组件传递数据（$emit的用法）

$emit的特点：

$emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数 用法：

父组件：

 // 父组件
 <template>
   <div class="section">
     <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
     <p>{{currentIndex}}</p>
   </div>
 </template>
 <script>
 import comArticle from './test/article.vue'
 export default {
   name: 'comArticle',
   components: { comArticle },
   data() {
     return {
       currentIndex: -1,
       articleList: ['红楼梦', '西游记', '三国演义']
     }
   },
   methods: {
     onEmitIndex(idx) {
       this.currentIndex = idx
     }
   }
 }
 </script>

子组件：

 //子组件
 <template>
   <div>
     <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
   </div>
 </template>
 <script>
 export default {
   props: ['articles'],
   methods: {
     emitIndex(index) {
       this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index
     }
   }
 }
 </script>

2、ref / $refs

这种方式也是实现父子组件之间的通信

ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

用法：

在子组件中：

 export default {
   data () {
     return {
       name: 'JavaScript'
     }
   },
   methods: {
     sayHello () {
       console.log('hello')
     }
   }
 }

在父组件中：

 <template>
   <child ref="child"></component-a>
 </template>
 <script>
   import child from './child.vue'
   export default {
     components: { child },
     mounted () {
       console.log(this.$refs.child.name);  // JavaScript
       this.$refs.child.sayHello();  // hello
     }
   }
 </script>

3、eventBus事件总线（$emit / $on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：

（1）创建事件中心管理组件之间的通信
 // event-bus.js
 ​
 import Vue from 'vue'
 export const EventBus = new Vue()
（2）发送事件假设有两个兄弟组件

firstCom和secondCom：

firstCom和secondCom的父组件：
 <template>
   <div>
     <first-com></first-com>
     <second-com></second-com>
   </div>
 </template>
 <script>
 import firstCom from './firstCom.vue'
 import secondCom from './secondCom.vue'
 export default {
   components: { firstCom, secondCom }
 }
 </script>
在firstCom组件中发送事件：
 <template>
   <div>
     <button @click="add">加法</button>    
   </div>
 </template>
 <script>
 import {EventBus} from './event-bus.js' // 引入事件中心
 export default {
   data(){
     return{
       num:0
     }
   },
   methods:{
     add(){
       EventBus.$emit('addition', {
         num:this.num++
       })
     }
   }
 }
 </script>
（3）接收事件

在secondCom组件中接收事件：

 <template>
   <div>求和: {{count}}</div>
 </template>
 <script>
 import { EventBus } from './event-bus.js'
 export default {
   data() {
     return {
       count: 0
     }
   },
   mounted() {
     EventBus.$on('addition', param => {
       this.count = this.count + param.num;
     })
   }
 }
 </script>

在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。

4、依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

  • provide 钩子用来发送数据或方法。

  • inject钩子用来接收数据或方法

用法

父组件中：

 provide() { 
     return {     
         num: this.num  
     };
 }

子组件中：

 inject: ['num']

还有另一种写法，这种写法可以访问父组件中的所有属性：

 provide() {
  return {
     app: this
   };
 }
 data() {
  return {
     num: 1
   };
 }
 ​
 inject: ['app']
 console.log(this.app.num)

注意： 依赖注入所提供的属性是非响应式的。

5、$parent / $children

  • 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。

  • 使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。

用法

子组件中：

 <template>
   <div>
     <span>{{message}}</span>
     <p>获取父组件的值为:  {{parentVal}}</p>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       message: 'Vue'
     }
   },
   computed:{
     parentVal(){
       return this.$parent.msg;
     }
   }
 }
 </script>

父组件中：

 <template>
   <div class="hello_world">
     <div>{{msg}}</div>
     <child></child>
     <button @click="change">点击改变子组件值</button>
   </div>
 </template>
 <script>
 import child from './child.vue'
 export default {
   components: { child },
   data() {
     return {
       msg: 'Welcome'
     }
   },
   methods: {
     change() {
       // 获取到子组件
       this.$children[0].message = 'JavaScript'
     }
   }
 }
 </script>

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。

注意

  • 通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例

  • 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的

  • 在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组

  • $children 的值是数组，而 $parent是个对象

6、$attrs / $listeners

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给C组件传递数据，这种隔代传数据的情况该使用哪种方式呢？

如果是用props/ $emit 来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用vuex，如果仅仅是传递数据，那可能有点浪费了。

针对上述情况，vue引入了 $attrs / $listeners，实组件之间的跨代通信。

  • $attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上

  • $listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

再说一下 inheritAttrs

  • 默认值为true，继承所有的父组件属性除props之外的所有属性。

  • 只继承class属性。

$attrs / $listeners的用法：

A组件（APP.vue）：

 <template>
     <div id="app">
         //此处监听了两个事件，可以在B组件或者C组件中直接触发 
         <child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1>
     </div>
 </template>
 <script>
 import Child1 from './Child1.vue';
 export default {
     components: { Child1 },
     methods: {
         onTest1() {
             console.log('test1 running');
         },
         onTest2() {
             console.log('test2 running');
         }
     }
 };
 </script>

B组件（Child1.vue）：

 
<template>
     <div class="child-1">
         <p>props: {{pChild1}}</p>
         <p>$attrs: {{$attrs}}</p>
         <child2 v-bind="$attrs" v-on="$listeners"></child2>
     </div>
 </template>
 <script>
 import Child2 from './Child2.vue';
 export default {
     props: ['pChild1'],
     components: { Child2 },
     inheritAttrs: false,
     mounted() {
         this.$emit('test1'); // 触发APP.vue中的test1方法
     }
 };
 </script>

C 组件 (Child2.vue)：

 <template>
     <div class="child-2">
         <p>props: {{pChild2}}</p>
         <p>$attrs: {{$attrs}}</p>
     </div>
 </template>
 <script>
 export default {
     props: ['pChild2'],
     inheritAttrs: false,
     mounted() {
         this.$emit('test2');// 触发APP.vue中的test2方法
     }
 };
 </script>

在上述代码中：

  • C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性

  • 在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）

7、Vuex 状态管理器

集中式存储管理所有组件的状态。

可以解决 多个视图依赖同一个状态 或者是 来自不同视图的行为需要变更同一个状态 的问题。

总结

根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信

1、父子组件间通信

  • 子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。

  • 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。

  • 使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

2、跨代组件间通信

  • 跨代组件间通信其实就是多层的父子组件通信，同样可以使用上述父子组件间通信的方法，只不过需要多层通信会比较麻烦。

  • 使用上述的6种方法的$attrs / $listeners方法。

3、兄弟组件间通信

通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。

4、任意组件间通信

  • 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。文章来源地址https://www.toymoban.com/news/detail-743839.html

到了这里，关于VUE组件间通信的七种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Mysql 表的七种联接方式【附带练习sql】

    Mysql 表的七种联接方式【附带练习sql】

    图形 连接方式 说明 SQL 内连接 共有部分 SELECT select_list FROM TableA A INNER JOIN TableB B ON A.Key = B.Key; 左连接 A表独有+共有部分 SELECT select_list FROM TableA A LEFT JOIN TableB B ON A.Key = B.Key; 右连接 B表独有+共有部分 SELECT select_list FROM TableA A RIGHT JOIN TableB B ON A.Key = B.Key; A的独有 SELECT select_l

    2024年02月09日
    浏览(45)

  • vue组件之间通信方式

    一、全局事件总线 范围 ：任意组件间 步骤 ：1、创建事件总线 第一种方式：通过自定义事件总线方式 局部引用 第二种方式：通过原型绑定 main.js 局部引用 解绑事件 二、props和$emit 范围 ：父子组件间 父组件 子组件 三、Vuex（状态管理） 范围 ：多个组件之间共享状态，可以

    2024年03月10日
    浏览(43)
  • vue组件通信方式汇总

    vue组件通信方式汇总

    之前学习了组件通信的6中方式 1-props ：使用场景：【 父组件给子组件传递数据 】 传递数据类型： 可能是函数：实质是子组件想给父组件传递数据； 可能不是函数：实质就是父组件给子组件传递数据 特殊情况：路由传递props 1:布尔值类型，把路由中params参数映射为组件pro

    2024年02月02日
    浏览(37)

  • vue组件间通信方式

    组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中，不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等，以实现组件之间的协调和交互。 vue组件之间的通信可以有多种形式和方式，常见的包括

    2024年02月11日
    浏览(46)
  • Vue 组件通信方式

    Vue 组件通信方式

    在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月22日
    浏览(35)

  • vue 组件之间通信的方式

    1.父向子版  父组件设置自定义属性 子组件props接收 2.子向父版 父组件设置自定义方法并绑定接收的方法 子组件触发方法  3.全局事件总线   4.Vuex 用这个的话首先要装包或者创建工程的时候选择这个选项手脚架会给你装好 5.路由 抽象一点说路由也算通信方式的一种吧 这种

    2024年01月18日
    浏览(39)

  • 在vue中不同组件通信方式

    1.父子组件，通过prop 2.非父子组件，通过vuex或根vue转载器 一般是以上两种情况，但是还有一种比较特殊的情况，即孙子组件或更深层次的组件通信 上述如果父组件需要与grandson通信，除了vuex，必须先与son组件通信，再由son与grandson通信，在层级少的情况下没有问题，但是层

    2024年01月24日
    浏览(40)
  • Vue组件的通信方式有哪些？

    Vue组件的通信方式有哪些？

    开始之前，我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一，vue中每一个 .vue 文件我们都可以视之为一个组件。通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信，即

    2023年04月10日
    浏览(38)
  • 【MYSQL高级】Mysql 表的七种连接方式【附带练习sql】

    【MYSQL高级】Mysql 表的七种连接方式【附带练习sql】

    图形 连接方式 说明 SQL 内连接 共有部分 SELECT select_list FROM TableA A INNER JOIN TableB B ON A.Key = B.Key; 左连接 A表独有+共有部分 SELECT select_list FROM TableA A LEFT JOIN TableB B ON A.Key = B.Key; 右连接 B表独有+共有部分 SELECT select_list FROM TableA A RIGHT JOIN TableB B ON A.Key = B.Key; A的独有 SELECT select_l

    2024年02月04日
    浏览(43)
  • 【vue3】学习笔记--组件通信方式

    【vue3】学习笔记--组件通信方式

    学习vue3总是绕不开vue2 vue3组件通信方式如下： props数据只读，从父组件传递到子组件，子组件内部不可直接更改 子组件需要使用defineProps方法接受父组件传递过来的数据 setup语法糖下局部组件无需注册直接可以使用 父组件 子组件 vue框架中事件分为两种：原生的DOM事件和自定

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包