通俗易懂了解Vue组件之间的通信方式

1.前言

Vue框架倡导组件化开发，力求将一个大的项目拆分成若干个小的组件，就如同我们小时玩堆积木一样，一个大房子是由若干个小积木组成。组件化开发最大问题就是组件之间数据能够流通，即组件之间能够通信。而组件间通信无非就分为三种情况：外层的大组件向内部的小组件通信，内部的小组件向外部的大组件通信，平级之间组件通信。说的官方一点就是：

  • 父组件与子组件通信
  • 子组件与父组件通信
  • 非父子组件通信

针对这三种情况，下面将一一展开介绍。

2.父组件 — —> 子组件

父组件向子组件传递数据通过props。通俗的讲就是：父组件在调用子组件时，在子组件标签内传入形如key=value属性，而子组件内部用props去接住父组件传来的key，进而再拿到传来的value值。

举个栗子：

我们现在有这样一个需求：

在某个项目中，包含了若干个顶部标题栏，而每个顶部标题栏的标题都各不一样，我们希望能够实现一个通用的标题栏组件，使得在之后需要标题栏的地方直接调用这个组件，并只需在调用的时候传入所要显示的标题文字，来满足标题栏相同而标题各不相同的需求。

上述需求是一个经典的父组件向子组件通信（传递数据）的需求，通用的标题栏组件时子组件，父组件是调用该标题栏的父组件，父组件传入不同的标题文字，子组件来渲染父组件所需要的标题。话不多说，直接上代码：

子组件代码：

 1 //子组件代码
 2 <template>
 3     <div class="header">{{ titleText }}</div>
 4 </template>
 5
 6 <script>
 7     export default {
 8         name: "Child",
 9         props:[‘title‘],
10         data(){
11           return{
12             titleText:this.title
13           }
14         }
15     }
16 </script>
17
18 <style scoped>
19   .header{
20     width: 100%;
21     height: 100px;
22     background-color: #ccc;
23     text-align: center;
24     font-size: 50px;
25     line-height: 100px;
26   }
27 </style>

父组件代码：

 1 //父组件代码
 2 <template>
 3   <div id="app">
 4     <Child :title="msg"></Child>
 5   </div>
 6 </template>
 7
 8 <script>
 9 import Child from ‘./Child‘
10 export default {
11   name: ‘app‘,
12   components:{
13     Child
14   },
15   data () {
16     return {
17       msg:‘难凉热血‘
18     }
19   }
20 }
21 </script>
22
23 <style>
24   *{
25     margin: 0;
26     padding: 0;
27   }
28 </style>

从上面代码中，我们可以看到，父组件在调用子组件时，向子组件传递了一个名为title的属性，同时该title属性对应了父组件自己内部的一个值msg，传递过去后，子组件通过自己本身的props选项中的title来接住父组件传过来的值，接着再将拿到的数据应用到自己需要的地方。这样，就完成了父组件向子组件通信的过程。

我们也就完成了上面提出的需求，我们只需在需要标题栏的地方调用该组件并且在调用的时候传入我们想要的title值即可。

3.子组件 — —> 父组件

子组件向父组件传递数据需要借助内建的 $emit 方法通过事件的方式来传递。

$emit方法是vue实例的一个方法，该方法就像一个广播，亦或者像一个信号发射器，该方法接受两个参数：

1 vm.$emit(‘信号名字‘,‘信号数据’)
  • 第一个参数：信号名字。即我要发射的这个信号的名字，我有可能发射多个信号，信号名字用于区分各个信号
  • 第二个参数：信号数据。即发射出的真实的信号内容，也就是数据。

再举个栗子：

想象这么一个情景：我军准备发动一次军事行动，行动代号：“打狗”。行动内容：“攻打美国白宫，实现全球统一！！！”那么由中央军委发射信号，军队接收信号。代码如下：

中央军委发射信号：

1 中央军委.$emit(‘打狗‘,‘攻打美国白宫，实现全球统一！！！‘)

军队接收信号：

1 军队.$on(‘打狗‘,function(data){
2    //data就是接收到的信号内容：攻打美国白宫，实现全球统一！！！
3     console.log(data)
4 })

OK，了解了上述过程，我们就可以实现子组件向父组件通信，由子组件发射信号，父组件接收信号。

子组件代码如下：

 1 //子组件代码
 2 <template>
 3   <div class="header">
 4     <p>我是子组件，我要向父组件传递的数据是：{{msg}}</p>
 5     <button @click="emit">发射</button>
 6   </div>
 7 </template>
 8
 9 <script>
10     export default {
11         name: "Child2",
12         data(){
13           return{
14             msg: "攻打美国白宫，实现全球统一！！！"
15           }
16         },
17         methods:{
18           emit(){
19             this.$emit(‘dagou‘,this.msg)
20           }
21         }
22     }
23 </script>
24
25 <style scoped>
26   .header{
27     width: 100%;
28     height: 100px;
29     background-color: #ccc;
30     text-align: center;
31   }
32 </style>

父组件代码：

 1 //父组件代码
 2 <template>
 3   <div id="app">
 4     <Child @dagou="go"></Child>
 5     <p>我是父组件，我接收到子组件传递的数据是：{{msg}}</p>
 6   </div>
 7 </template>
 8
 9 <script>
10 import Child from ‘./Child2‘
11 export default {
12   name: ‘app‘,
13   components:{
14     Child
15   },
16   data () {
17     return {
18       msg:‘‘
19     }
20   },
21   methods:{
22     go(data){
23       this.msg = data
24     }
25   }
26
27 }
28 </script>
29
30 <style>
31   *{
32     margin: 0;
33     padding: 0;
34   }
35 </style>

效果如图：

从上面代码中，我们可以看到，子组件点击发射按钮之后，广播了一个名为dagou的信号，同时发出了信号数据：“攻打美国白宫，实现全球统一！！！”（子组件第19行代码），与此同时，父组件监听@dagou信号（父组件第4行代码），当监听到dagou信号后，调用自身的go函数，同时go函数接受到了传来的数据，这样，就完成了子组件向父组件通信的过程。

4.非父子组件通信

所谓非父子组件，指的是这两个组件没有任何关系，有可能这两个组件各自存在于不同于的父组件内，那么，这种情况下两个组件又该如何通信呢？

在通常情况下，两个非父子组件要进行简单的通信，我们会一般采用中央事件总线的机制，说白了，就是找一个中间传话人，A组件要与B组件说话，那A组件就先给中间传话人说，然后由中间传话人告诉B组件。

那么，在代码中，我们会实例化一个空的vue实例组件用来充当这个中间传话人，请看如下代码：

用于中间传话的空vue组件代码：

 1 //eventBus空组件，什么也不写，只用于传话
 2 <template>
 3
 4 </template>
 5
 6 <script>
 7   import Vue from ‘vue‘
 8   export default new Vue();
 9 </script>
10
11 <style scoped>
12
13 </style>

A组件代码：

 1 //A组件代码
 2 <template>
 3     <div>
 4       <p>我是A组件，我要给B组件说：{{toBmsg}}</p>
 5       <button @click="say">对B说</button>
 6     </div>
 7 </template>
 8
 9 <script>
10     import eventBus from ‘./eventBus‘
11     export default {
12         name: "A",
13         data(){
14           return{
15             toBmsg:"hello,我是A组件"
16           }
17         },
18         methods:{
19           say(){
20             eventBus.$emit(‘haha‘,this.toBmsg)
21           }
22         }
23     }
24 </script>
25
26 <style scoped>
27
28 </style>

B组件代码：

 1 //B组件代码
 2 <template>
 3     <p>我是B组件，我听到A组件给我说：{{msgText}}</p>
 4 </template>
 5
 6 <script>
 7     import eventBus from ‘./eventBus‘
 8     export default {
 9         name: "B",
10         data(){
11           return{
12             msgText:‘‘
13           }
14         },
15       created(){
16           let self = this;
17           eventBus.$on(‘haha‘,function (data) {
18             //此处没有用this，是因为此处的this指向了eventBus
19             self.msgText = data
20           })
21       }
22     }
23 </script>
24
25 <style scoped>
26
27 </style>

效果如图：

至此，三种情况下的组件间通信的方式介绍完毕。

（完）

原文地址：https://www.cnblogs.com/wangjiachen666/p/9484562.html

时间： 2024-11-05 20:49:51

通俗易懂了解Vue组件之间的通信方式的相关文章

Vue组件之间的传参

Vue组件之间的传参方式有三种 第一:父传子 第二:子传父 第三:兄弟之间相传 第一,父传子,顾名思义,外层组件传参给嵌套内部的组件 在父代中嵌套的标签 <son v-bind:toSon="fatherData"></son> //发送数据给子代 在子代中接收数据 需要添加一个属性叫做prpos props:["toSon"], <!DOCTYPE html> <html lang="en"> &

vue之父子组件之间的通信方式

(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--> <!OCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sccipt src="js/vue.js" t

vue组件之间8种组件通信方式总结

本文链接:https://blog.csdn.net/zhoulu001/article/details/79548350 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }

vue的父子组件以及非父子组件之间的通信方式

Vue组件通信 父传子  prop 自定义属性,将父亲的数据传给儿子 1. 在组件标签上使用自定属性 2. 在组件内部通过props来接收自定义属性 3. 子组件接收后既可以在组件里直接使用,不过只能用不能改 <wiz_code_mirror> //父组件 <body>  <div id='app1'>      <!-- 在tp1组件标签上使用 xixi自定义属性 -->    <tp1 :xixi='change'></tp1>

vue组件之间的数据传递

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: ['lo

vue组件之间的通信

vue组件间的通信有父--->子.子--->父.非父子之间的通信 虽然我们稍微复杂的项目都用vuex来管理了,但是还是想写一篇关于有父--->子.子--->父.非父子 之间通信的文章.下面通过代码来讲述 父--->子组件间的通信 父级页面: <template> <div id="app"> <Header :parentMsg='parentMsg' > </Header> </div> <

Vue组件之间的传值方法

在vue当中有两种组件之间的传值方法,分别是 * 父子组件* 之间的传值和* 非父子组件 *之间的传值方法 父子组件之间的传值方法 父子组件之间的传值分为两种 * 父组件给子组件传值 子组件给父组件之间的传值 父组件给子组件传值方法 // 父 <div id = "app"> <my-content></my-content> </div> // 子 <template id="content"> <

vue 组件之间的传值

组件之间的传值有三种  1,父组件给子组件传值 ,   2,子组件给父组件传值   3, 非父子组件之间的传值(又叫兄弟组件传值) 1.父组件给子组件传值   (父组件给子组件传值需要通过props) 首先我的页面结构是这样的  child是子组件   father是父组件, 在这里我新建一个父组件  father.vue <template> <div> <div>这是父组件</div> <!-- 使用组件child --> <child

【vue组件之间互相传值：父传子，子传父】

今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 4.保存修改的文件,查看浏览器 5.我们依然可以对message的值进行v-bind动态绑定 此