Vue 父传子，子传父及兄弟组件通信的了解

最新推荐文章于 2023-02-28 01:09:53 发布
最新推荐文章于 2023-02-28 01:09:53 发布
阅读量230 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niehuifang521/article/details/104759346
版权

一、父组件=》子组件传递数据
1、子组件在props中创建一个属性，用以接收父组件传过来的值
2、父组件中注册子组件
3、在子组件标签中添加子组件props中创建的属性
4、把需要传给子组件的值赋给该属性
二、子组件=》父组件传递数据
*当子组件需要向父组件传递数据时，就要用到自定义事件。
1、子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2、将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
父子通信可看以下示例

在这里插入图片描述
在这里插入图片描述不管是组件还是实例 自己的数据只能自己使用
props 自定义属性 将父亲的数据传给儿子
1.在组件标签上使用自定属性
2.在组件内部通过props来接受自定义属性
3.接受完了 既可以在组件里直接使用 只能用不能改
/
/
子父通信
自定义事件 子组件触发父组件的方法
e m i t 可 以 触 发 绑 定 在 组 件 身 上 自 定 义 事 件 1. 在 组 件 标 签 绑 定 一 个 自 定 义 事 件 < s o n @ c u s t o m = ′ a d d ′ > < / s o n > 2. 在 组 件 的 内 部 通 过 emit 可以触发绑定在组件身上自定义事件 1.在组件标签绑定一个自定义事件 <son @custom='add'></son> 2.在组件的内部 通过 emit可以触发绑定在组件身上自定义事件1.在组件标签绑定一个自定义事件<son@custom=′add′></son>2.在组件的内部通过emit 触发这个自定事件
在子组件里触发父组件的方法
*/
在这里插入图片描述
在这里插入图片描述
兄弟通信中，做了一个小例子，关于兄弟组件控制对方的显示与隐藏， 并从中了解两者的关系
组件1 和组件2 是兄弟
组件1有div 可以显示隐藏
组件2 有butoon 控制显示隐藏

控制显示隐藏的值放在公有的父组件上
在这里插入图片描述
在这里插入图片描述
在通信中，组件之间传值，他们都有一个共同点就是有中间介质，
*子向父的介质是自定义事件
*父向子的介质是props中的属性
*非父子组件的介质是中央事件总线
抓准这三点对于组件之间通信就好理解了

niehuifang521
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 组件父子，子父，兄弟通信
虞公子的博客
05-20 202
第一种：父传子：主要通过 props 来实现的 具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收 第二种：子传父：主要通过$emit 来实现 具体实现： 子组件通过通过绑定事件触发函数， 在其中设置this.emit(‘要派发的自定义事件’，要传递的值)，emit(‘要派发的自定义事件’，要传递
Vue组件通信：子传父的简易理解
啊啊怪的学习日记
12-07 340
子传父最常用的方法是使用$emit 父组件 <template> <div id="App"> <div>父组件</div> <child @childClick="parentClick"></child> <div>{{parentMessage}}</div> </div> </template> <script> import Chi
vue中兄弟组件通信
wu_xiao_qing的博客
11-21 696
最常见的是父子组件通信，那兄弟组件通信是什么样的呢。 第一，创建一个bus.js文件，初始化vue实例 第一，首先在获取数据的组件中添加一个emit事件，如图。 第三，要需要数据的组件中，监听刚创建的事件
vue初学篇---父组件，子组件，兄弟组件
人生有点bug的程序员的博客
12-09 735
父组件、子组件和兄弟组件定义以及相互调用 最近整理了一下vue写的代码，把四千多行的代码，整理成了三千多行，并且拆分了多个组件，用来进行公共调用。 下面就是一个业务层级的一个目录层级，在最外层是相当于父组件，里面的相当于子组件。 在main.js里面进行将组件注册成全局组件，方便调用，只需要填写如下代码，用来组件的初始化。testOne和testChildren就相当于兄弟组件。 ...
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
qq_41497443的博客
02-28 7794
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
本文将详细讲解Vue中的四种主要传值方式：父传子、子传父、兄弟组件间的通信以及非父子组件间的通信。 1. **父传子（Props）** - **概念**：父组件向子组件传递数据是通过`props`属性实现的，它允许父组件的数据向...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
为了帮助大家解决这一问题，以下将详细阐述Vue.js中父组件$on监听子组件$emit事件的正确实现方式。 首先，我们来了解一下Vue.js中事件监听和触发的基本概念。在Vue.js中，$on方法用于在当前实例上监听一个自定义...
vue中子组件调用兄弟组件方法
08-27
在 Vue 中，子组件调用兄弟组件方法是非常常见的需求，本文将介绍如何在 Vue 中实现子组件调用兄弟组件方法。下面我们将详细介绍这个问题。 为什么需要子组件调用兄弟组件方法？ 在实际开发中，我们经常会遇到子...
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
Vue 兄弟组件通信的方法（不使用Vuex） 本文主要介绍了Vue 兄弟组件通信的方法，主要思想是使用自定义事件实现父子组件之间的通信...要实现兄弟组件通信，需要熟悉子父、父子之间的传值，并使用自定义事件来实现通信。
vue实现的组件兄弟间通信功能示例
10-17
对于简单的兄弟组件通信，可以使用provide/inject API，由父组件提供数据，子组件（包括间接子组件）可以注入这些数据。或者使用Vuex，通过actions、mutations和getters管理状态，实现跨组件通信。 总的来说，Vue...
Vue 组件间通信方式
珍妮的小罐君
05-31 306
前言 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
一文读懂 Vue 组件通信 同级组件、兄弟组件、父子组件、子父组件 通信 实例（详解）
Bnana博客
03-31 1973
Vue 组件通信 实例 同级组件、兄弟组件、父子组件、子父组件 通信 实例（详解）同级组件 $emit $on 通信，兄弟组件 父子组件 propr $refs $children $parent 之间通信 $emit 它可以被 v-on 侦听 程序化的侦听器 同时使用不同的 组件 每个新的实例都程序化地在后期清理它自己 $children 获取的是组件集合 $parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组
Vue——05-01组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法
NanChen的博客
10-16 337
全局注册，通过Vue.component 局部注册，通过 components:{cpnc:cpnc} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3991
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue组件之间的通信方式总结，含父子组件通信、兄弟组件通信、跨级通信
小草莓的博客
07-06 923
组件是 Vue 最强大的功能之一，Vue 中每一个vue 我们都可以视之为一个组件。组件间通信，即指组件(vue)通过某种方式来传递信息以达到某个目的。组件通信的目的：让组件之间互相能进行通讯，这样才能构成一个有机的完整系统。
Vue第23篇，Vue兄弟组件传值，Vue兄弟组件通讯的两种方式，详细过程（vue同级别组件传值通讯，vue兄弟组件通讯传值常用）
weixin_65793170的博客
01-02 6527
在 Vue.js 中，兄弟组件间的通信并不是像父组件到子组件那样直接，因为它们之间并没有直接的父子关系。不过，Vue 提供了几种机制，来实现兄弟组件之间的数据共享和通信。兄弟组件，就是同级别的组件
VueJS兄弟组件通信
John的专栏
06-14 3651
on和emit的事件必须是在一个公共的实例上，才能触发。 我的解决方案是： 新建bus.js import Vue from 'vue' export var bus = new Vue() App.vue里created方法里定义事件 import { bus } from 'bus.js' // ... created () { bus.$on('tip', (
vue中兄弟组件之间的联动，兄弟组件之间的传值
热门推荐
zyz00000000的博客
12-05 2万+
兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作 方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B 第一步：子组件A传值给父组件 通过$emit将e.target.innerText传递给父组件 <template> <div class="initail"> <ul> &l...
vue兄弟组件通信问题：$emit和$on
weixin_34226706的博客
02-02 1342
在前端，不管我们做什么样的业务和功能，都不会离开页面之间的通信问题，在pc端是这样，在移动端更需要解决页面之间的通信问题。今天我们来看看Vue的通信方法一----事件总线。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线，具体的官方文档可看非父子组件通信 。官方文档很简洁，但是像我这种菜鸟看的是一脸懵逼，官方的例子也没有(估计是认为太简单了
组件通信 父传子通信 子传父通信 兄弟通信
最新发布
04-01
在Vue.js中，组件通信有三种方式：父传子通信、子传父通信和兄弟通信。 1. 父传子通信 父传子通信是指父组件向子组件传递数据或信息的方式。在Vue.js中，父组件可以通过props属性向子组件传递数据或信息。子组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值