combus通讯_Vue兄弟组件通信Bus传值--小案例

1、首先定义一个bus.js文件

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

import Vue from 'vue'

const Bus = new Vue({})

export default Bus

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

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

A组件

A组件:{{msg}}

A组件

//引入bus文件

import bus from './bus.js'

export default {

data(){

return {

msg:'TaylorSwift'

}

methods:{

brother(){

// 派发事件

bus.$emit('A',this.msg)

}

B组件

B组件:{{msg}}

//引入bus文件

import bus from './bus.js'

export default{

data(){

return{

msg:"Goddess"

}

created(){

// 监听派发的事件

bus.$on('A',(res)=>{

console.log(res)

this.msg = res

})

}

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

combus通讯_Vue兄弟组件通信Bus传值--小案例相关推荐

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
vue父子组件通信，兄弟组件通信
目录一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
vue组件通信（传值）
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
组件通信、传值（父子、爷孙、多层级）（prop、$emit、provide、inject）（vue）
问题: 组件之间的通信无非就那种:兄弟组件间.父子组件间.爷孙(多层级间),兄弟组件之间通信我前面的文章已经讲过(点击此链接: 兄弟组件:(38条消息) 兄弟组件通信(vue-bus)(vue)_秃秃 ...
VUE3+TS（父子、兄弟组件通信）
目录父传子值.方法(子调用父值.方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值.方法) 兄弟(任意组件)通信引入Mitt来完成任意组件通信父传子值.方法(子调用父值.方法) 1.统 ...
React兄弟组件通信
1.在父组件定义好回调函数接收组件A传过来的值 // 引入组件 import SonA from "./components/SonA" import SonB from &quo ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
vue组件间通信之兄弟组件通信（vue3.0$EventBus）
vue组件间通信之兄弟组件通信(vue3.0$EventBus) vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带 ...

combus通讯_Vue兄弟组件通信Bus传值--小案例

combus通讯_Vue兄弟组件通信Bus传值--小案例相关推荐

最新文章

热门文章