在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue.js 非父子組件怎么通信

vue.js 非父子組件怎么通信

參照網(wǎng)上找的代碼但是我這沒有效果(網(wǎng)上的代碼如下)：

新建一個bus.js內(nèi)容為下：
import Vue from 'vue'
export default new Vue

a.vue
import Bus from './bus.js'
在事件中觸發(fā) Bus.$emit('msg', 123)

b.vue
import Bus from './bus.js'
在created或mounted鉤子中接收：
Bus.$on('msg', val => {

this.nnum = val

})

請問這種方式可以嗎·？
有沒有能給詳細解釋下的大神

回答
編輯回答
入她眼

官方文檔

非父子組件的通信

有時候，非父子關(guān)系的兩個組件之間也需要通信。在簡單的場景下，可以使用一個空的 Vue 實例作為事件總線：

var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
  // ...
})
2017年9月12日 00:03
編輯回答
笑忘初

bus_plugin.ts

import { Subject } from 'rxjs'
import Vue from 'vue'

const sub = new Subject<EventItem>()

interface EventItem {
  n: string;
  v: any;
}

const RxEvent = {
  install(Vue) {
    Vue.prototype.$rx_on = function (name: string, func: Function) {
      this.$subscribeTo(sub.filter(t => t.n === name).map(t => t.v), func)
    }

    Vue.prototype.$rx_emit = function (n: string, v) {
      sub.next({ n, v })
    }
  }
}

Vue.use(RxEvent)

main.js

import Vue from 'vue'
import Rx from 'rxjs/Rx'
import VueRx from 'vue-rx'
import 'bus_plugin.ts'

Vue.use(VueRx, Rx)

component.vue

export default {
  created() {
    this.$rx_on('event1', this.func1)
  },
  methods: {
    func1(v) {
      console.log(v)
    },
    emit() {
      this.$rx_emit('event1', 1)
    }
  }
}
2017年4月7日 03:05
編輯回答
乞許

以上新建bus的方式可以的，其實就是新建了一個vue實例，通過$on監(jiān)聽函數(shù)觸發(fā)事件

2017年7月20日 21:44
編輯回答
清夢

可以參考下我的這篇文章vue非父子組件之間通信 ，有問題可以繼續(xù)溝通

2018年1月8日 08:28
編輯回答
萌面人

如果你指的是兄弟組件通信，狠狠戳?：
http://runjs.cn/code/k0nfythj

2018年4月17日 18:16
編輯回答
尤禮

這種方式可以的，但是需要修改一下，傳值次數(shù)會從0增加，修改詳解https://www.jianshu.com/p/fde...

2017年3月22日 14:53