vue组件通信

原创 已于 2022-03-22 23:31:17 修改 · 1.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2022-03-22 23:30:28 首次发布
本文详细讲解了Vue中props与$emit的父子组件数据传递，eventBus事件总线的应用，依赖注入的深度通信，以及ref/$refs的组件交互。重点介绍了如何利用这些技术实现跨组件间的高效通信。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

（1） props / $emit

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

1. 父--->子

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

2,子--->父

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

父组件给子组件绑定事件（v-on:test=”fn”），并定义回调函数，子组件通过this.$emit(test)触发父组件中的回调函数

（2）eventBus事件总线（emit/on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，

1,安装全局事件总线

 2,接收方：往总线上绑定事件，并定义回调函数

 3,发送方：往总线上触发事件，并传递参数

 

最好在beforeDestroy钩子中解绑当前组件所用到的事件

（3）依赖注入（project / inject）

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

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

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

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

（4）ref / $refs

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

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

父组件：在子组件的实例化标签中打标识ref=’xxx’,就可以通过this.$refs.xxx操作子组件上的数据和方法

 子组件不需要做任何操作：

 （5）parent/children

  • 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）
  • 使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

子组件中使用$parent访问父组件的数据和方法：

 父组件中使用$children访问子组件的数据（非响应式）和方法：

需要注意：

  • 通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例
  • 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
  • 在根组件#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组
  • $children 的值是数组，而$parent是个对象 

（5）attrs/listeners

Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

inheritAttrs：

父组件传递的props参数，如果子组件没有声明接收（props:[]）：

如果inheritAttrs为true，则这些没有声明的属性变为子组件根元素上的html属性

如果inheritAttrs为false,则没有声明的props属性不会变为html的属性

$attrs

$attrs保存了绑定在组件上不被识别为props的所有属性（没有声明接收的props）(class 和 style 除外)

不论inheritAttrs是true还是false，子组件的$attrs都能接收到未声明的props

通过v-bind=‘$attrs’，可以把本组件的$attrs传递给子组件

$listeners

它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）

把父组件的事件传递给子组件，子组件可以触发父组件中的回调

总结：

父组件：props传参，传递自定义事件（test）,定义回调函数fn

<template>

<child  name:’hhh’ age：’18’@test=”fn”><child/>

<template/>

子组件：没有声明接收的props参数在$attrs中，把$attrs传递给孙组件, （name,age）

并通过 v-on=”$listeners” 把子组件的事件监听器给孙组件，孙组件 可以触发test事件

<template>

<sun v-bind="$attrs" v-on="$listeners"><sun/>

<template>

孙组件可以直接使用数据（name,age）,也可以触发事件 this.$emit(test)

Vue组件通信
javajy的博客
04-07 686
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父$emitprops的特点：props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新；但是子组件无法引起父组件的数据更新。props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以是传递一个对象或函数。props属性名规则：若在props中使用驼峰形式，模板中标签需要使用短横线的形式来书写。
Vue 组件通信全攻略：4 种核心方式详解（附完整代码示例）
最新发布
weixin_46001736的博客
05-19 930
Vue 组件通信全攻略：4 种核心方式详解（附完整代码示例）
vue组件间通信六种方式
weixin_45035430的博客
03-03 1084
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： image 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
kang_vue_components:vue组件通信介绍原始码-源码通
03-24
让我们深入研究Vue组件通信的几种常见方式。 1. **props向下传递**： - 在Vue中，父组件可以使用`props`将数据传递给子组件。在`props`中定义接收的数据属性，然后在子组件的模板中使用它们。 - 例如：`...
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue 组件通信
北海之灵的博客
01-06 454
1.自定义事件-$emit 子组件用 $emit() 来触发事件，父组件用 $on() 来监听子组件的事件。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;/head&gt; &lt;body&gt;
vue的组件通信
L_squan的博客
05-20 125
vue的组件通信 （分为三种：父传子、子传父、兄弟组件通信） 父传子： //在父页面 <template> <div class=""> <child1 :sendData="brand" ></child1> </div> </template> <script> import child1 from '../components/sona' export default { data() {
vue 组件通信
weixin_46390400的博客
07-17 297
vue最大的特点之一就是组件化，那么组件跟组件之间是如何通信的呢？ 常见的有三种通信： 父传子 子传父 兄弟传值 一、父传子 1.创建子组件，在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props，然后创建一个名为message的属性 3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值 或者利用v-bind进行绑定 总结一下： 1.子组件在props中创建一个属性，用以接收父组
vue中的组件通信
无远弗届
06-15 789
Vue.js 是一个用于构建用户界面的渐进式框架，它易于上手，同时具备强大的功能。Vue的核心库只关注视图层，易于与其他库或现有项目整合。Vue的设计哲学是响应式和组件化，这使得开发者能够通过构建可复用的组件来快速开发复杂的应用。在Vue中，组件是自定义的可复用元素，它们可以包含HTML、CSS和JavaScript。组件系统是Vue的核心特性之一，它允许开发者通过组合简单的组件来构建复杂的应用。
vue组件通信 at
03-17
### Vue 组件间的通信方法 Vue 提供了多种组件间通信的方式，适用于不同的场景和需求。以下是常见的 Vue 组件通信方法及其实现技巧： #### 1. **Props 和 $emit** `props` 是父组件向子组件传递数据的主要方式，而 `$emit` 则用于子组件向父组件发送事件通知。 - 父组件通过 `props` 将数据传递到子组件中[^1]。 - 子组件可以通过调用 `$emit` 方法触发自定义事件，并将数据回传给父组件[^2]。 示例代码如下： ```vue <!-- ParentComponent.vue --> <template> <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from Parent', }; }, methods: { handleChildEvent(data) { console.log('Data received from child:', data); } } }; </script> ``` ```vue <!-- ChildComponent.vue --> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'], mounted() { this.$emit('childEvent', 'Hello from Child'); } }; </script> ``` --- #### 2. **Provide 和 Inject** `provide/inject` 主要用于跨多层嵌套的父子组件之间共享状态，适合全局配置或深层嵌套的情况。 示例代码如下： ```javascript // ParentComponent.vue export default { provide() { return { sharedState: this.sharedState, }; }, data() { return { sharedState: 'Shared Data', }; }, }; // DeeplyNestedChildComponent.vue export default { inject: ['sharedState'], created() { console.log(this.sharedState); // 输出 "Shared Data" }, }; ``` --- #### 3. **v-model (双向绑定)** `v-model` 实现了父子组件之间的双向绑定，通常用于表单输入控件。 示例代码如下： ```vue <!-- ParentComponent.vue --> <template> <CustomInput v-model="inputValue" /> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { inputValue: '', }; }, }; </script> ``` ```vue <!-- CustomInput.vue --> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script> export default { props: ['modelValue'], }; </script> ``` --- #### 4. **Vuex (集中式状态管理)** 对于复杂的大型项目，推荐使用 Vuex 来统一管理和分发状态。 示例代码如下： ```javascript // store.js import { createStore } from 'vuex'; const store = createStore({ state: { count: 0, }, mutations: { increment(state) { state.count++; }, }, }); export default store; ``` ```vue <!-- AnyComponent.vue --> <template> <button @click="increment">Increment Count</button> {{ count }} </template> <script> export default { computed: { count() { return this.$store.state.count; }, }, methods: { increment() { this.$store.commit('increment'); }, }, }; </script> ``` --- #### 5. **Mitt 或 Event Bus** 如果不想引入 Vuex，可以使用轻量级库 Mitt 创建一个简单的事件总线来处理非父子关系的组件通信。 示例代码如下： ```javascript // eventBus.js import mitt from 'mitt'; const emitter = mitt(); export default emitter; // ComponentA.vue emitter.emit('custom-event', payload); // ComponentB.vue emitter.on('custom-event', handlerFunction); ``` --- #### 6. **Expose/Ref** 在组合式 API 中，`ref` 可以用来访问子组件实例中的公开属性或方法，配合 `defineExpose` 使用。 示例代码如下： ```vue <!-- ParentComponent.vue --> <template> <ChildComponent ref="childRef" /> </template> <script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; const childRef = ref(null); function callChildMethod() { childRef.value?.publicMethod(); } </script> ``` ```vue <!-- ChildComponent.vue --> <script setup> defineExpose({ publicMethod() {}, }); </script> ``` --- #### 7. **Attrs 和 Listeners** 当某些属性未被声明为 `props` 时，它们会自动成为 `attrs` 并向下传播；类似的还有 `$listeners`，不过在 Vue 3 中已被移除并替换为 `v-on`。 示例代码如下： ```vue <!-- GrandParentComponent.vue --> <template> <ParentComponent customAttr="test" @customEvent="handleCustomEvent" /> </template> ``` ```vue <!-- ParentComponent.vue --> <template> <ChildComponent v-bind="$attrs" v-on="$listeners" /> </template> <script> export default { inheritAttrs: false, // 防止 attrs 被挂载到根节点上 }; </script> ``` --- #### 总结 以上列举了几种主流的 Vue 组件通信方式，每种都有其适用范围和特点。开发者应根据具体业务需求选择合适的方案。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值