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

非父子組件通信： 有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線： var bus = new Vue()； // 觸發組件 A 中的事件 bus.$emit('id-selected', 1) // 在組件 B 創建的鉤子中監聽事件 bus.$on('id-selected', function (id) {// ... })

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

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

如何獲取到這個空的vue對象 bus呢.在組件里面直接調用這個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>

然后在另一個組件內調用on事件接收,當然在組件銷毀時解除綁定,使用on事件接收,當然在組件銷毀時解除綁定,使用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　　

　　

　　

　　

轉載于:https://www.cnblogs.com/robinunix/p/10876789.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。