最近在研究vue.js，總體來說還算可以，但是在web開發(fā)群里有一些人問在單文件組件開發(fā)模式中非父子組件如何傳值的問題，今天在這里講講，希望對大家有所幫助！?
在官網(wǎng)api中的這段講解很少，也很模糊；官網(wǎng)中說明如下：

非父子組件通信： 有時候兩個組件也需要通信 (非父子關(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) {// ... })

那么這一段在單文件組件開發(fā)模式中具體怎么用呢？?
首先在main.js中加入data,如下：

new Vue({el: '#app',router,template: '<App/>',components: { App },data:{bus:new Vue()} })

如何獲取到這個空的vue對象 bus呢.在組件里面直接調(diào)用這個this.$root

<template><div class="title" @click="change(msg)">{{ msg }}</div> </template> <script>export default {name: 'first',data() {return {msg: '我是首頁'}},methods: {change(text) {this.$root.bus.$emit("hehe", text)}}}</script>

然后在另一個組件內(nèi)調(diào)用on事件接收,當(dāng)然在組件銷毀時解除綁定,使用on事件接收,當(dāng)然在組件銷毀時解除綁定,使用off方法

<template><h1>{{ msg }}</h1> </template> <script>export default {name: 'second',data() {return {msg: '我是第二頁'}},created() {let that = this;this.$root.bus.$on("hehe", function (t) {that.msg = that.msg + t})}}</script>

然后點擊的時候就能傳遞值了，還等什么，快來試試吧！歡迎加入前端交流群496522155，備注：前端?
希望對你有幫助，~溜了~

原文：https://blog.csdn.net/weixin_37794497/article/details/77337613　　

　　

　　

　　

轉(zhuǎn)載于:https://www.cnblogs.com/robinunix/p/10876789.html

總結(jié)

以上是生活随笔為你收集整理的vue.js单文件组件中非父子组件的传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。