Vue 非父子组件传值

最新推荐文章于 2024-08-18 13:53:12 发布
最新推荐文章于 2024-08-18 13:53:12 发布
阅读量384 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdy14/article/details/94593787
版权

前言

小编在上一篇博客中总结了vue中父子组件传值,回顾一下,父组件通过属性向子组件传值,子组件通过事件向父组件传值.那么不具有父子关系的组件如何进行传值操作呢?接下来请看下文~

正文

1.什么样的关系是非父子组件

我们看下图可以看出,下图中有三层组件,根组件,子组件,子组件下的子组件.
那么不具有父子组件的就是兄弟组件和根组件和最下边组件具有的关系.
1-3,3-3即为非父子组件.
在这里插入图片描述

2.如何实现非父子组件传值呢?

观察者模式(也叫发布订阅模式/总线模式/Bus)

首先我们创建一个全局的子组件,命名为child.我们在父组件中放置这两个child组件.如图:
在这里插入图片描述
在这里插入图片描述
然后,我们实现两个child之间的通信,当点击第一个child组件的时候,另一个组件的内容变得和第一个组件的一样.也就是 点击Dell,下边的Lee也变为Dell;点击Lee,上边的Dell也变为Lee.

  1. 通过传递content,来想child里传值
    在这里插入图片描述
    在这里插入图片描述

  2. 关键!! 在vue类中添加一个bus属性,这样vue实例中就都会有这个属性,起到总线的作用!
    在这里插入图片描述

  3. 在子组件绑定click事件,实现刚才我们想实现的功能
    在这里插入图片描述

  4. 方法里添加事件如图
    解释:this.bus指的是实例上挂载的bus,即上图中的bus,bus又是vue的实例,所以就会有emit这个方法,通过emit方法,向外触发事件,事件触发的时候,还会携带this.content内容,
    在这里插入图片描述

  5. 写一个生命周期钩子.组件挂载会触发的钩子
    监听change事件
    在这里插入图片描述

注意:vue有单项数据流,所以会出现错误,怎么解决,请参照我的上一篇博客~
此时此刻,就可以实现非父子组件间的传值啦!

草莓味少女vv
关注
专栏目录
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改父组件的值 return { copyConten
初识 Vue（18）---（非父子组件间的传值）
姜皓的博客
07-28 968
非父子组件间的传值 常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分 下图这种情况的组件间传值（父子组件间传值） 方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值 下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值） 方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Prop...
vue中父组件向子组件传值，子组件向父组件传值，简洁易懂
最新发布
qq_44849312的博客
08-18 653
父子组件传值，子父组件传值
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
积少成多
11-30 6901
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 先说一下什么是事件总线，其实就是订阅发布者模式； 比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发； 这是一种设计模式，和语言没有关系； 如果不太了...
vue非父子组件传值
莫逸雪的博客
09-03 510
1.单独的事件中心管理组件间的通信 var eventHub = new Vue() 2.监听事件与销毁事件 eventHub.$on('add-todo',addTodo) eventHub.$off('add-todo') 举例： （1）事件中心（js文件） import Vue from 'vue' const hub = new Vue() export default hub （2）组件A <template> <div> {{value2}} &l
vue中非父子组件传值
w_0217的博客
08-11 70
vue中非父子组件传值 1.事件总线 -------原理上建立一个公共的js文件 // bus.js import Vue from 'vue' export default new Vue //在需要 传递,接收 消息的地方引入 import bus from './bus.js' //传递消息 bus.$emit('msg',val) //接收消息 bus.$on('msg',val=>{ console.log(val) }) 2.$attrs / $listeners 3.vuex
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue3父子组件传值.doc
02-05
在Vue3中，父子组件之间的通信方式相比Vue2有所改变，更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. ...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
12-09
如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue...
VUE 非父子组件传值
julili_1989的博客
04-27 135
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2、在要广播的地方引入刚才定义的实例 3、通过 VueEmit.$emit('名称','数据') 4、在接收收数据的地方通过 $om接收广播的数据 VueEmit.$on('名称',function(){ }) ...
vue 非父子组件传值
fighting_sunnyGirl的博客
03-05 562
页面A &lt;template&gt; &lt;div class="hello"&gt; &lt;h1 @click="store"&gt;{{ msg }}&lt;/h1&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'myHel
Vue非父子组件传值
qq_49867247的博客
03-15 4134
Vue非父子组件传值： 事件总线 $attrs / listeners
vue：非父子组件传值
EchoLiner的博客
04-14 485
非父子组件传值
vue之非父子组件传值
aijiaolao2823的博客
12-21 114
vue之非父子组件传值 如何进行非父子组件传值，下面举例说明。 比如说有两个兄弟组件要进行传值，我们把这两个兄弟组件当做两个城市，一个是home城市，一个news城市。我们把传值当做发送快递。 我们想要发送快递就的有一辆专门的快递车，来帮助我们传递快递，并且要求这辆快递车是可以全国都可以跑的，也就是说我们需要定义一个Vue的实例对象，这个Vue实例对象就是我们的快递车。 有了快递...
vue非父子组件之间传值
xfmuchengxue的博客
07-10 720
记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。为了实现头部的搜索框，搜索table表格中的数据，因为是两个页面，所以需要组件传值。首先，main.js中创建事件中心eventHubnew Vue({ el: '#app', router, components: { App }, template: '&lt;App/&gt;', // 非父子组件传递数据,创建事件中心e...
Vue的非父子组件之间传值
zhaojiaxing123的博客
06-28 391
Vue的非父子组件之间传值
vue2父子组件传值
06-14
在Vue 2中，父子组件之间的数据传递是双向的，主要通过props（属性）和$emit（事件）来实现。以下是一些常见的父子组件传值方法： 1. **Props（属性）**: - **单向数据流**：父组件向子组件传递数据使用`props`。父组件定义props时，需要指定类型，子组件通过`props`接收数据。例如： ```javascript // 父组件 <child-component :value="parentValue" /> // 子组件 props: { value: { type: String, default: '' } } ``` 子组件只能读取props，不能修改，除非父组件通过$emit触发自定义事件。 2. **自定义事件（$emit）**: - **父子组件间的双向通信**：如果需要子组件向父组件发送更新，可以使用$emit触发一个自定义事件，如： ```javascript // 子组件 this.$emit('update-value', newValue); // 父组件 <child-component @update-value="handleChildValueChange" /> methods: { handleChildValueChange(value) { this.parentValue = value; } } ``` 3. **引用类型（Object/Array）**: - 如果父组件想传递对象或数组，Vue会默认浅复制。若需要深拷贝，需在子组件中处理，例如使用`Vue.extend`或`JSON.parse(JSON.stringify())`。 4. **自定义指令（v-bind、v-on）**: - 可以使用自定义指令如`v-model`在组件间共享数据，但这在Vue 2中不是推荐的做法，因为可能会带来性能问题。 5. **$parent/$children/$refs**: - 有时可能需要直接访问父组件或子组件的实例，这时可以使用`$parent`、`$children`和`$refs`。但这些选项通常不鼓励滥用，因为它们破坏了组件的封装性。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

草莓味少女vv

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

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

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

打赏作者

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

抵扣说明：

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

余额充值