04 非父子组件传值

一、非父子组件传值
要点：
1、需要在全局vue的实例的原型上挂在一个新的vue实例
2、挂载完之后，就可以让所有的组件通过原型上的vue实例实现一个连接的桥梁
具体实现
1、发送数据者使用原型上的vue实例的 $emit 自定义事件
2.、接受数据者使用原型上的vue实例的 $on 监听
main.js中：

//单一事件管理 挂载到全局
Vue.prototype.Event=new Vue()

三个组件 a.vue b.vue c.vue index.vue
index.vue是a、b、c的父组件

a组件发送给兄弟b组件
a.vue

<template><div class="box"><h3>this is A</h3><p>a data:{{aData}}</p><button @click="send">发送</button></div>
</template>
<script>
export default {data(){return {aData:"a data"}},methods:{send(){// 通过全局的vue实例上的$emit('自定义事件',要发送的数据)this.Event.$emit("sendA",this.aData)}}
}
</script>

b.vue// 通过全局的vue实例上的$on(‘a组件的自定义事件’,(接受的值)=>{})

<template><div class="vb"><h4>组件b</h4><p>接受a的数据:{{a}}</p></div>
</template>
<script>
export default {data() {return {a:"",b:'B的数据'}},mounted(){//此处保存b组件的实例var that =this// 在接受的地方，通过Event的$on监听广播this.Event.$on('sendadate',function(data){// console.log(data);// console.log(this)//指的是Event实例 如果使用的是箭头函数 ，可以直接使用thisthat.a = data})},
}
</script>

c.vue接受a.vue的值
c.vue

<template><div class="vc"><h4>组件c</h4><p>接受a组件的值：{{a}}</p></div>
</template>
<script>
export default {data() {return {a:""}},mounted(){this.Event.$on("sendadate",(data)=>{this.a =data})}
}
</script>

04 非父子组件传值相关推荐

vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我 ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
Angular 父子组件传值，非父子组件传值
一.子组件调用父组件,父组件给子组件传值引入Input header.component.ts import { Component, OnInit, Input, Output } from '@ ...
angular框架如何实现父子组件传值、非父子组件传值
文章目录 1.理解父子组件.非父子组件 2.父组件给子组件传值- -@input 3.父组件通过@ViewChild主动获取子组件的数据和方法 4.非父子组件如何传递数据 1.理解父子组件.非父子组件 ...

04 非父子组件传值

04 非父子组件传值相关推荐

最新文章

热门文章