美文网首页vue
Vue兄弟组件通信Bus传值--小案例

Vue兄弟组件通信Bus传值--小案例

作者: _TSRed | 来源:发表于2018-05-18 14:44 被阅读0次
1、首先定义一个bus.js文件

引入空的vue,实例化,曝光出去

import Vue from 'vue'

const Bus  = new Vue({})

export default Bus
2、创建两个vue文件(兄弟组件)

值得注意的监听派发事件之后,要用ES6的箭头函数

A组件
<template>
    <div id="app">
        A组件:{{msg}}
        <!--定义任意事件-->
        <button @click="brother">A组件</button>
    </div>
</template>

<script>
//引入bus文件
import bus from './bus.js'
export default {
    data(){
        return {
            msg:'TaylorSwift'
        }
    },
    methods:{
        brother(){
//          派发事件
            bus.$emit('A',this.msg)
        }
    }
}
</script>

<style>
</style>
B组件
<template>
    <div id="app">
        B组件:{{msg}}
    </div>
</template>

<script>
//引入bus文件
import bus from './bus.js'
export default{
    data(){
        return{
            msg:"Goddess"
        }
    },
    created(){
//      监听派发的事件
        bus.$on('A',(res)=>{
            console.log(res)
            this.msg = res
        })
    }
}
</script>

<style>
</style>

如有不懂,可以看我的 Vue-组件通讯

相关文章

  • Vue兄弟组件通信Bus传值--小案例

    1、首先定义一个bus.js文件 引入空的vue,实例化,曝光出去 2、创建两个vue文件(兄弟组件) 值得注意的...

  • vue通信方法总结(未)

    1. 父给子通信 2. 子向父传值 3. 兄弟组件传值 eventbus 专门用一个空的 Vue 实例(Bus)来...

  • vue组件传值

    1.兄弟组件传值 兄弟组件之间就需要一个中间值,我在这里称为bus。在vue文件main.js中,我们利用 Vue...

  • 状态管理Bus的使用

    Bus 1. 父子组件之间通信 父传子 props 子传父 $emit 事件触发 2. 兄弟之间传值 同一父组件兄...

  • VUE03

    Vue组件 组件的创建 组件的指令以及事件绑定 父子组件创建 父子组件通信 兄弟组件的传值 动态组件

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • Vue - 兄弟组件传值

    1. 使用中间Vue实例实现兄弟传值。 创建一个用于转发数据的中间Vue实例bus 在子组件1中使用bus.$em...

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • vue eventBus传值问题,可以控制台打印,但是无法渲

    本来是打算在兄弟组件之间传值,如下 错误原因如下: 在AllDocument.vue中的那两行代码,首先用bus传...

  • 使用Bus.js进行组件通信

    新建Bus.js文件 在需要通信的组件中引入bus.js 传值组件 通过$emit发送一个msg事件,传的参数是>...

网友评论

    本文标题:Vue兄弟组件通信Bus传值--小案例

    本文链接:https://www.haomeiwen.com/subject/ptygdftx.html