VUE 非父子组件传值

最新推荐文章于 2023-04-14 19:43:56 发布
最新推荐文章于 2023-04-14 19:43:56 发布
阅读量126 收藏
点赞数
分类专栏： VUE学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/julili_1989/article/details/116203792
版权

1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例

2、在要广播的地方引入刚才定义的实例

3、通过 VueEmit.$emit('名称','数据')

4、在接收收数据的地方通过 $om接收广播的数据 VueEmit.$on('名称',function(){ })

julili_1989
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改父组件的值 return { copyConten
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue 非父子组件传值
fighting_sunnyGirl的博客
03-05 547
页面A <template> <div class="hello"> <h1 @click="store">{{ msg }}</h1> </div> </template> <script> export default { name: 'myHel
Vue非父子组件传值
qq_49867247的博客
03-15 4119
Vue非父子组件传值： 事件总线 $attrs / listeners
vue学习18：非父子组件间的传值（bus/总线/发布订阅者模式/观擦者模式）
simoon's的博客
05-07 826
这里我比较疑惑的是为什么点击的时候，会console.log两次这是因为点击的时候。这个组件的方法被触发，所以上面的两个组件都是这个子组件，都会执行这个方法。console的是当前点击的content。...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
vue3父子组件传值.doc
02-05
在Vue3中，父子组件之间的通信方式相比Vue2有所改变，更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. ...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
12-09
如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。 Vue...
vue的非父子组件的传值详细解析
xiaonanhaijing的博客
10-28 308
首先我们看一张图 图上 看上图 我们应该如何做 是不是感觉很麻烦? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src='./vue.js'></script> </head> &.
vue中非父子组件传值
w_0217的博客
08-11 62
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非父子组件传值
qq_35587000的博客
07-21 235
1.新建文件VueEvent.js //引入空的vue实例 import Vue from "vue" var VueEvent=new Vue() //暴露vue实例 export default VueEvent;   2.在非父子组件中的有个文件进行广播数据 //引用vue实例 import VueEvent from '../model/VueEvent.js'; //...
Vue 非父子组件传值
winnieFighting
07-04 374
前言 小编在上一篇博客中总结了vue中父子组件传值,回顾一下,父组件通过属性向子组件传值,子组件通过事件向父组件传值.那么不具有父子关系的组件如何进行传值操作呢?接下来请看下文~ 正文 1.什么样的关系是非父子组件 我们看下图可以看出,下图中有三层组件,根组件,子组件,子组件下的子组件. 那么不具有父子组件的就是兄弟组件和根组件和最下边组件具有的关系. 1-3,3-3即为非父子组件. 2.如何实...
vue：非父子组件传值
EchoLiner的博客
04-14 471
非父子组件传值
vue之非父子组件传值
aijiaolao2823的博客
12-21 108
vue之非父子组件传值 如何进行非父子组件传值，下面举例说明。 比如说有两个兄弟组件要进行传值，我们把这两个兄弟组件当做两个城市，一个是home城市，一个news城市。我们把传值当做发送快递。 我们想要发送快递就的有一辆专门的快递车，来帮助我们传递快递，并且要求这辆快递车是可以全国都可以跑的，也就是说我们需要定义一个Vue的实例对象，这个Vue实例对象就是我们的快递车。 有了快递...
vue非父子组件间的传值
前端爆米花
03-17 3195
vue非父子组件传值的基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名') 案例 放在html页面上即可显示，注意要引入vue <!DOCTYPE html> <htm...
vue非父子组件之间传值
xfmuchengxue的博客
07-10 711
记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。为了实现头部的搜索框，搜索table表格中的数据，因为是两个页面，所以需要组件传值。首先，main.js中创建事件中心eventHubnew Vue({ el: '#app', router, components: { App }, template: '&lt;App/&gt;', // 非父子组件传递数据,创建事件中心e...
vue基础：非父子组件传值
谷咕咕
01-22 677
vue基础：非父子组件传值 本文共用到四个文件： 根组件：App.vue 两个子组件：Home.vue,News.vue js文件：eveemit.js 文章最后有所有文件 步骤： 1.新建一个js文件，引入vue并实例化，最后暴露这个实例 vueemit.js文件 import Vue from 'vue' var vueevent =new Vue() export default vue...
vue2父子组件传值
最新发布
06-14
以下是一些常见的父子组件传值方法： 1. **Props（属性）**: - **单向数据流**：父组件向子组件传递数据使用`props`。父组件定义props时，需要指定类型，子组件通过`props`接收数据。例如： ```javascript // 父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值