非父子组件间通信

非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件。

在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵。这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整

一、在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线
new Vue({
  el: ‘#app‘,
  data:{
    Event: new Vue()
  },
  render: h => h(App)
})
二、在各组件中使用 Vue 的实例属性 $root 来访问我们当前组件树的根 Vue 实例,这样就可以使用

vm.$root.Event 来访问我们定义的事件发射器 Event

比如我在 Hello.vue 组件中想发送数据到 Vue.vue 组件中

<template>
    <div class="hello">
        <h3>我是 {{name}} 组件</h3>
        <button @click="send">发送数据到Vue组件中</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name: ‘Hello‘
        }
    },
    methods:{
        send(){
            // 触发组件 Hello 中的事件
                           // $emit(事件名,数据)
            this.$root.Event.$emit(‘hello‘,this.name)
        }
    }
}
</script>

Vue.vue 组件中进行接收

<template>
    <div class="Vue">
        <h3>我是 {{name}} 组件</h3>
    </div>
</template>

<script>
export default {
    data(){
        return {
            name: ‘‘
        }
    },
    mounted(){
        // 在组件 Vue 创建的钩子中监听事件
                        // $on(事件名,数据)
        this.$root.Event.$on(‘hello‘,name => {
            this.name = name
        })
    }
}
</script>

这样就可以实现数据的通信了

非父子组件通信

原文地址:https://www.cnblogs.com/wu971023-/p/8985166.html

时间: 2024-10-14 00:58:14

非父子组件间通信的相关文章

vue非父子组件间通信

有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... }) 在更多复杂的情况下,你应该考虑使用专门的 状态管

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

angularjs2中的非父子组件的通信

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务,作为传递参数的媒介 */ @Injectable() export class PrepService{ //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 profileInfo: any; } /** *2.传递参数的组件,我这边简单演示,直接就在构

vuex非父子组件间改值

最近在用vue写单页面项目嘛,然后就有遇到这问题啦,看了很多参考,要么繁琐的一塌糊涂,要么就是传值并不是改值,下面我述说下方法,最清晰的简单demo 父子间用props 非父子间用vuex store(store/index.js) state: { x:66 }, mutations:{ add:function(state,x){//这边的x来自于a.vue state.x=1+state.x; } }......... a.vue 先引用过来store(import { store } f

Vue2.0入门系列——父子组件间通信

1.子组件更新,父组件不变 点击"按钮"按钮,子组件数据被修改,父组件数据不变  =========>>>>>>  项目源代码, <head> <meta charset="UTF-8"> <title>v2.0父子组件通信</title> <script src="./vue.js"></script> <script> wi

vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递. 首先需要在任意地方添加一个bus.js 在bus.js里面 写入下面信息 1 import Vue from 'vue' 2 export default new Vue; 在需要通信的组件都引入B