vue非父子组件(兄弟组件)传值

最新推荐文章于 2023-02-28 17:03:11 发布
最新推荐文章于 2023-02-28 17:03:11 发布
阅读量794 收藏 2
点赞数
分类专栏： vue 文章标签： vue 组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44642410/article/details/88830490
版权
这篇博客介绍了如何在Vue中实现非父子组件（兄弟组件）之间的值传递。首先创建了一个父组件Home，包含两个子组件News和FriendsList。然后通过一个公共js文件vueEvent.js来辅助实现通信。在FriendsList组件中触发事件并传递值，而News组件则通过methods中的监听器接收并显示传递的值。
摘要由CSDN通过智能技术生成

vue非父子组件传值


有点类似于vuex，vuex也可以实现非父子组件传值，这里就不说vuex了，下面是不用vuex的非父子组件传值:

1.新建一个父组件Home.vue,再建两个子组件News.vue和FriendsList.vue;这样News和FriendsList就是我们的非父子组件(兄弟组件)啦；(此处省略Home组件引入这两个子组件的方法)

2.新建一个vueEvent.js做为公共js；

import Vue from 'vue';//引入vue
var VueEvent = new Vue();//实例化
export default VueEvent;//暴露出去

3.FriendsList.vue传值给=>N

最低0.47元/天 解锁文章
虛掷、青春
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
vue3父子组件传值.doc
02-05
vue3父子组件传值
vue中非父子组件之间传值（即兄弟组件之间的传值）
will5451的博客
06-06 526
前言 兄弟组件（非父子组件之间传值）需要建立一个中间实例，作为数据传输的承载媒介。 然后兄弟A组件通过**this.$emit("组件名称或则别名",数据)**进行数据广播。 然后兄弟B组件通过this.$on("组件别名",function(data){ console.log(data)进行数据处理 }) 来监听兄弟A组件的数据广播。 就这样实现了兄弟组件之间的传值。 举例说明 兄弟组件Home.vue News.vue 新建中间空实例文件 VueEvent.js VueEvent.js imp
Vue非父子组件传值
qq_49867247的博客
03-15 4071
Vue非父子组件传值： 事件总线 $attrs / listeners
Vue 常用传值方式、父传子、子传父、非父子组件传值
ZXH0122的博客
02-28 197
Vue2.0 传值方式： 在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue常用的三种传值方式有： 父传子 子传父 非父子传值 引用官网的一句话：
vue组件间数据传递（vue组件传参），父传子，子传父，非父子组件传值
weixin_64037609的博客
11-08 785
2.子组件接收数据——在子组件的配置对象中 写入 props属性 并将属性值 设置为数组/对象 来接收数据。1.父组件传递数据——在父组件中 给 子组件对象绑定自定义属性 属性值为 要传递的数据。前面我们学习子传父的时候 知道 子组件向父组件传递数据的时候 使用的就是 发布订阅。3.子组件使用数据——在子组件的模板中 直接使用props数组项/属性即可。2.使用事件总线提供的vue实例对象 来进行数据的发布 和 订阅。子组件实例对象自己发布数据 子组件实例对象自己订阅数据。
【Vue】组件间传值的三种方式：父传子，子传父，非父子传值
心生的小鱼专栏
05-12 2688
组件间传值的三种方式：父传子，子传父，非父子传值
vue非父子组件间的传值
01-08
vue非父子组件传值的基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名')...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
vue父子组件、兄弟组件之间的传值通信
WanFengZhou
05-31 1166
一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用props来显示的声明父组件传递的属性，例如： 子组件： <!--这是子组件 child.vue --> <template> <div class="not-found"> {{ message }} </div> </template> <script> props: ['message'], export default {
vue组件间的传值（父子、子父、兄弟、后代、非兄弟）
陈同学的博客
04-10 2364
目录 父向子传值 子向父传值 兄弟传值 后代传值 非兄弟传值 在解决组件通讯方面，比较好用的就是vuex，但是在小型的项目中使用vuex就会有点大材小用的感觉，而且会增加文件体积。以下的都是不用vuex的传值解决方法，本文着重点是 后代的传值 和 非兄弟的传值，一些基本的操作就粗略带过。。。 好的，进入正题 现在假设 App.vue 下有两个子组件 brother.vue 和...
非父子组件传值的方式(兄弟间组件传值)
zhengwenhaodezw的博客
12-12 420
采用bus 第三方总线的方式传值 第一步 是封装总线bus.js import Vue from 'vue' export default new Vue() 第二步 是编写组件a <template> <div> <el-button type="primary" @click="getChange">消息</el-button&g...
vue中非父子组件之间传递值
web_callBack的博客
04-02 2191
1.创建一个公共的js文件 bus.jsbus.js2.创建两个兄弟组件one.vue和two.vueone.vuetwo.vue3.将两个组件放在同一个父组件abc.vue中最终运行效果如下
自定义v-model事件
Pgy121的博客
09-08 3152
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
vue2.0父子组件以及非父子组件如何通信
热门推荐
mr_fzz的博客
01-20 10万+
1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent>data(){ return { msg: [1,2,3] }; }子组件通过props来接收数据: 方式1：props: ['chil
10.非父子组件之间的通信-兄弟组件间的通信
wl516372370的博客
06-07 295
兄弟组件间的传值一、单页面中实现效果二、单文件组件中1.在main.js中写入一个事件中心，并向外暴露这个事件。2.在组件 A 中 import 这个事件中心2.在组件 B 中 import 这个事件中心 一、单页面中 情景：实现点击组件A中的按钮触发组件B中的数据增加，点击组件B中的按钮触发组件A中的数据增加。 const hb = new Vue(); //注册一个事件中心 <body> <div id="app"> <children1-item><
组件传值：兄弟间传值（非父子组件进行传值）
mariodf的博客
06-18 210
组件传值：兄弟间传值（非父子组件进行传值）
非父子组件之间的通信
Fairy的博客
06-01 972
方法： 1.使用中央事件总线（bus），也就是一个中介来完成。 <div id="app"> {{message}} <component-a></component-a> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...
vue2父子组件传值
最新发布
06-14
在Vue 2中，父子组件之间的数据传递是双向的，主要通过props（属性）和$emit（事件）来实现。以下是一些常见的父子组件传值方法： 1. **Props（属性）**: - **单向数据流**：父组件向子组件传递数据使用`props`。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值