VUE中组件之间的通信方式

已于 2022-08-04 17:21:16 修改
阅读量4.2k 收藏 34
点赞数 13
文章标签： vue
于 2022-04-15 12:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44810886/article/details/124191087
版权

目录

一、父子组件之间的通信方式

1.props+$emit()

3.$parent+$children

4.provide+inject

5.$attrs+$listeners

6.ref+$refs

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

2.事件总线

（备注视频代码学习来自：重要！父子组件通信的方式有哪几种？【Vue面试题】_哔哩哔哩_bilibili）

一、父子组件之间的通信方式

1.props+$emit()

1.父组件通过props向子组件传递数据（在子组件中用props接收）

2.子组件通过$emit()向父组件传递数据或事件，如在子组件中自定义事件changeMessage,携带信息'bye’, 然后在父组件中通过v-on监听这个事件

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <child :message="message" @changeMessage="message =$event"> </child>
  </div>
</template>

<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeMeaasge () {
      this.message = 'Bye'
    }
  }
}
</script>

child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
    <button @click="handleClick"> 按钮</button>
  </div>
</template>
<script>
export default {
  props: ['message'],
  methods: {
    handleClick () {
      this.$emit('changeMessage', 'Bye')
    }
  }
}
</script>

运行后如下，点击按钮，父亲孩子下面的hello都会变成bye。

                                            

2.通过回调函数（callback）

parent.vue（将changeMsgFn作为另外一个props传给子组件）

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <child :message="message" :changeMsgFn="changeMeaasge"> </child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeMeaasge () {
      this.message = 'Bye'
    }
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
    <button @click="changeMsgFn"> 按钮</button>
  </div>
</template>
<script>
export default {
  props: ['message', 'changeMsgFn'],
}
</script>

3.$parent+$children

1.父组件通过$children访问子组件

2.子组件通过$parent访问父组件

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>{{message}}</p>
    <button @click="changeChildNumber">按钮</button>
    <child></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  },
  methods: {
    changeChildNumber () {
      this.$children[0].number = 50
    }
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{number}}</p>
    <p>{{parentMessage}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 10
    }
  },
  computed: {
    parentMessage () {
      return this.$parent.message
    }
  }
}
</script>

                  (点击按钮后子组件中的数据10变为50）

4.provide+inject

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <child></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  provide: {
    message: 'Hello'
  }
}
</script>

 child.vue

<template>
  <div>
    <h1>孩子</h1>
    <p>{{message}}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

                                                             

5.$attrs+$listeners

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <child :name="name" :age="age" @changeName='changeName'></child>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  data () {
    return {
      name: 'pipi',
      age: 1
    }
  },
  methods: {
    changeName () {
      this.name = 'wuyi'
    }
  }
}
</script>

child.vue

<template>
  <div>
    <h1>孩子</h1>
    <button @click="$listeners.changeName">按钮</button>
    <grand-child v-bind="$attrs"></grand-child>
  </div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
  components: {
    GrandChild
  }
}
</script>

GrandParent.vue

<template>
  <div>
    <h1>孙子</h1>
    <p>姓名：{{$attrs.name}}</p>
    <p>年龄：{{$attrs.age}}</p>
  </div>
</template>
<script>
export default {
}
</script>

                                                  

6.ref+$refs

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <child ref="childComp"></child>
    <button @click="changeName">按钮</button>
  </div>
</template>
<script>
import Child from "./child.vue"
export default {
  components: {
    Child
  },
  methods: {
    changeName () {
      console.log('点击前', this.$refs.childComp.age);
      this.$refs.childComp.changeAge();
      console.log('点击后', this.$refs.childComp.age);
    }
  }
}
</script>

  child.vue

<template>
  <div>
    <h1>孩子</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      age: 20
    }
  },
  methods: {
    changeAge () {
      this.age = 50;
    }
  }
}
</script>

                                                

每种通信方式还需要继续学习，各自优缺点局限性等....

二、兄弟组件之间的通信方式

1.子传值到父，再由父传值到子

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>name：{{name}}</p>
    <hr>
    <child11 :name="name" @ChildOneClick="handleParentClick" />
    <hr>
    <child22 :name="name" />
  </div>
</template>

<script>
import child11 from './child11.vue'
import child22 from './child22.vue'

export default {
  data () {
    return {
      name: 'pipiwuyi'
    }
  },
  methods: {
    handleParentClick (name) {
      this.name = name;
    }
  },
  components: {
    child11,
    child22,
  },
}
</script>

child11.vue

<template>
  <div>
    <h1>孩子1</h1>
    <p>name:{{name}}</p>
    <button @click="handleChildOneClick">按钮</button>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  methods: {
    handleChildOneClick () {
      this.$emit('ChildOneClick', 'hui')
    }
  }
}
</script>

 child22.vue

<template>
  <div>
    <h1>孩子2</h1>
    <p>name:{{name}}</p>

  </div>
</template>

<script>

export default {
  props: ['name']
}
</script>

                                                           

2.事件总线

new一个新的vue实例并导出，子组件都引入，子组件1$emit出去，子组件2$on监听

main.js

import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue(); //创建实例,并导出

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

parent.vue

<template>
  <div id="app">
    <h1>父亲</h1>
    <p>name：{{name}}</p>
    <hr>
    <Child1 :name="name" @ChildOneClick="handleParentClick" />
    <hr>
    <Child2 :name="name" />
  </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  data () {
    return {
      name: 'pipiwuyi'
    }
  },
  methods: {
    handleParentClick (name) {
      this.name = name;
    }
  },
  components: {
    Child1,
    Child2,
  },
}
</script>

child1.vue

<template>
  <div>
    <h1>孩子1</h1>
    <p>name:{{myName}}</p>
    <button @click="handleChildOneClick">按钮</button>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data () {
    return {
      myName: this.name
    }
  },
  methods: {
    handleChildOneClick () {
      // this.$emit('ChildOneClick', 'hui')
      this.myName = 'hui';
      eventBus.$emit('ChildOneClick', 'hui')//eventBus是vue的实例，存在$emit的方法
    }
  }
}
</script>

child2.vue

<template>
  <div>
    <h1>孩子2</h1>
    <p>name:{{myName}}</p>

  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data () {
    return {
      myName: this.name
    }
  },
  created () {
    eventBus.$on('ChildOneClick', (name) => {
      this.myName = name;
    })
  }
}
</script>

点击按钮，两个子组件中的内容改变，父组件中不变 

大肥妹
关注
  • 13
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 组件间通信方式
珍妮的小罐君
05-31 296
前言 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
超详细 vue组件通信的10种方式
鹏多多的博客
02-08 5844
vue：超级详细，项目常用的十种组件通信方式
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3954
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue3_组件间通信方式
最新发布
分享程序相关知识
06-03 972
vue3组件通信。
vue3-实现父子组件之间的通信（详解+源码）
wzy_PROTEIN的博客
06-07 6771
vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解。
Vue中组件间通信的6种方式
zz130428的博客
12-11 2874
它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。
详解Vue组件之间通信的七种方式
10-17
主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue父子组件之间的通信实例详解
10-17
除了以上方法，Vue 还提供了其他组件通信的方式，如使用事件总线（Event Bus）、Vuex 状态管理库等。对于更复杂的跨级组件通信，可以创建一个全局的事件总线，或者当多个组件需要共享状态时，使用 Vuex 进行集中式...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 ...在 Vue 中，父组件向子组件通信的方法还有其他方式，例如使用 $emit 和 $on 事件、使用 Vuex 等状态管理库。但是，使用 props 和 v-bind 指令是最常见和最简单的方法。
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
vue组件通信的6种方式
hudabao888666的博客
02-13 257
vue组件通信的6种方式
Vue父子组件互相通信实例
Lawliet
01-20 7350
组件实例之间的作用域是独立的，意味了不应该在子组件的模板内直接引用父组件的数据，但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。 prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”： Vue.component('child', { // 声明 props pr
vue父子组件进行通信方式
weixin_47450807的博客
02-07 5092
在vue中如何实现父子组件通信，本篇博客将会详细介绍父子组件通信的流程。 如图所示，父组件向子组件传递数据，可以通过props，子组件向父组件传递数据可以通过触发事件来进行。 一、props 父组件向子组件传递的数据，通过props进行传递，我们可以把props理解为属性。props传递存在两种格式，一种是数组格式，另一种是对象类型格式。其中第二种对象类型可以设置是否为必须数据，以及是否存在默认值数据。 第一种用法：数组 //父组件 <HelloWorld :title="title">&l
vue组件间通信方式
htong521的博客
12-31 2289
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。 vue组件间的几种通信方式：props、$emit/$on、vuex、$paraent/$children、$attrs/$listeners、provide/inject. 1.父子组件间传值 父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、p...
Vue.js 父子组件通信的十种方式
Joy_Yue的博客
11-06 2万+
转载微信上的一篇文章 1、prop 这个在我们日常开发当中用到的非常多。简单来说，我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。 浏览器输出 2、$emit 官方说法是触发当前实例上的事件...
组件通信的5种方法
weixin_46215920的博客
11-15 4855
组件通信的6种方法 一、使用 props 和 emit，进行父子组件的通信 父传子 props <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
Vue组件之间如何进行通信
weixin_45337430的博客
07-13 1474
vue组件之间的传值大致分为三种：父组件给子组件传值，子组件给父组件传值，兄弟组件之间传值 vue组件之间简单的数据传递，如果组件之间传递的数据比较复杂，建议使用vue的状态管理模式 vuex 父组件给子组件传值 1.父组件通过props给子组件传值 props 就是父组件给子组件标签上定义的属性，用来接收父组件传递的数据，props 的值可以是字符串数组，也可以是各自的名称和类型，用法和 data 中的数据用法一样，在子组件中只能使用该值，不能修改 2.父组件通过$ref给子组件传值 ref 用于给元素
vue组件通信，点击传值，动态传值（父传子，子传父）
热门推荐
Dreamer_xr的博客
10-23 2万+
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！ 一、父组件传子组件，核心--props 下面是场景，点击传值给子组件 在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...
vue3 组件之间通信
06-06
在 Vue3 中，组件之间的通信可以通过以下方式进行： 1. Props & Emit：通过Props将数据从父组件传递到子组件，在子组件中通过Emit触发事件传递数据给父组件...在使用组件通信方式时，需要根据具体情况选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值