Vue 组件间通信的几种方式

已于 2024-04-16 16:42:31 修改
阅读量222 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端
于 2022-12-21 14:33:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45532769/article/details/128396715
版权
本文介绍了Vue组件间通信的六种方式，包括props/$emit、ref/$parent/$children、EventBus、$attrs/$listeners、provide/inject以及Vuex，并阐述了它们各自的适用场景，如父子、隔代、兄弟组件之间的通信。
摘要由CSDN通过智能技术生成

提示：后续会更加详细, 敬请期待

文章目录

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

（1）props / $emit 适用 父子组件通信

  • 这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children适用 父子组件通信

  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
  • $parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on）适用于 父子、隔代、兄弟组件通信

  • 这种方法通过一个空的 Vue
    实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs / $listeners适用于 隔代组件通信

  • $attrs：包含了父作用域中不被 prop 所
最低0.47元/天 解锁文章
阿超学编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些
weixin_39310325的博客
08-06 627
VUE组件之间通信的方式有哪些（SSS） 常见使用场景可以分为三类： 父子通信： null 父向子传递数据是通过 props ，子向父是通过 $emit / $on $emit / $bus Vuex 通过父链 / 子链也可以通信（ $parent / $children ） ref 也可以访问组件实例 兄弟通信： $emit / $bus Vuex 跨级通信： $emit / $bus ； Vuex ； provide / inject API $att.
vue组件间通信的13种方式
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
vue组件通信
weixin_41989325的博客
09-17 182
Vue 组件间通信有哪几种方式？ Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。 （1）props / $emit 适用 父子组件通信 这种方法是 Vue 组件的基础，...
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue组件通讯
gh_0114的博客
02-18 209
vue组件通讯方式主要有如下几种： 1.props 、$emit() 父子组件通信 2.$attrs $listener 多层嵌套组件通讯 attrs：包含了父作用域中不被prop所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind...
vue组件之间几种通信方式
flowRight的博客
05-06 222
父组件传给子组件 1 子组件先注册一个属性 2 把属性绑定到组件上放在父容器内， 指定要绑定传给子组件的的值 3 父组件内要有值， 4 子组件取值 子组件传给父组件 1 在子组件绑定 2 在父组件内接受触发 company_close为一个在父组件内被触发的函数 ...
vue组件间通信六种方式（总结篇）
01-19
前言 组件是 vue.js最强大的功能之一...本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别及使用
vue中组件通信的八种方式（值得收藏！）
10-16
本文将详细阐述Vue组件间通信的八种方式，并结合实例说明它们的适用场景。 1. **Props / $emit** - **父组件向子组件传值**：通过在父组件模板中使用`props`属性将数据绑定到子组件的属性上。例如，父组件`section...
vue组件间通信六种方式（完整版）
aliyun3的博客
04-13 419
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent/$children、$attrs/$listeners和..
vue组件通信的几种方式
weibaobao1314的博客
08-26 8439
vue组件通信的几种方式 最近用vue开发项目，记录一下vue组件间通信几种方式 第一种，父子组件通信 一.父组件向子组件传值 1.创建子组件，在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props，然后创建一个名为message的属性 3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值 4.保存修改的文件，查看浏览器 5.我们依然可以对message的值进行v-bind动态绑定
vue中组件通信的几种方式
shilanli的博客
03-24 194
vue中组件通信的几种方式 1、父子组件通信 ​ 父传子：props 在子组件定义时，使用props 声明所能接收到的属性，在父组件中使用子组件时，传递标签中的属性值即可 ​ 子传父：利用事件的方式传递，父组件中使用子组件时，使用v-on绑定一个自定义时间，事件处理程序通常为在父组件中定义的某个方法，这个方法接收相应的参数，在子组件需要传递数据的位置使用$emit触发在父组件中绑定的时间并传递相应的数据 2、跨组件跨层级通信 ​ a.转换为父子组件的关系 ​ b.使用event-bus ：事件总线 ev
vue组件间通信方式
qq_36582776的博客
04-12 464
一、vue中组件之间存在什么样的关系？ 我们可以Vue组件之间的关系为如下两类： 1）父子组件之间通信。 2）非父子组件之间通信(兄弟组件、隔代关系组件等)。 二、Vue中的组件通信方式 1）父子组件之间通信： 1. pros / $emit 父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。 注意：props 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 props 只读，不可被修改，所有修改都会失效并警告。 子组件通过.
vue组件间的通讯的10种方法
Serena_tz的博客
05-09 5687
1.props/$emit props主要用于父组件传递数据给子组件，父==>子。 Vue自定义事件 父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件 仅仅用于父子组件传递，不适用于 三层及其以上 2. $emit/$on 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当
vue 组件通信的几种方法
soso杰
06-18 199
父传子的方法 // 父组件 <HelloWorld msg="Welcome to Your Vue.js App"/> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, // 子组件 {{msg}} props: { msg: String, }, ...
vue组件间通信六种方式（总结篇上）
这里是前端，是不一样的前端
09-27 734
文章目录前言一、Vue组件是什么？二、具体介绍2.1方法一、 props / $emit2.2方法二、 $emit / $on2.3方法三、 vuex总结 前言 组件是 vue.js最强大的功能之一 ，而组件实例的作用域是相互独立的 ，这就意味着不同组件之间的数据无法相互引用。 一般来 说 ，组件可以有以下几种关系 ： 一、Vue组件是什么？ 组件是 vue.js最强大的功能之一 ，而组件实例的作用域是相互独立的 ，这就意味着不同组件之间的数据无法相互 引用。 这篇文章主要介绍vue组件间
vue组件间通信六种方式
m0_56272227的博客
09-16 870
vue组件间通信六种方式 组件之间的传值通信 组件之间的通讯分为三种：父传子、子传父、兄弟之间的通讯； props/$emit 父传子：props 子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件 on/on/on/emit 这种方法通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。 具体实现方式： vuex vuex就是一个仓库，仓库里放了很多对象。在state中存放
七种方式详解Vue组件间通信实例与技巧
本文将深入探讨Vue组件之间通信的七种主要方式，帮助开发者更好地理解和利用Vue框架中的交互机制。首先，我们将重点关注父子组件之间的通信： 1. **Props和$emit**：这是Vue中最基本的通信方式，父组件通过`props`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿超学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值