vue.js單文件組件中非父子組件的傳值實例
更新時間：2018年09月13日 08:42:29 作者：炎炎烈日放煙花
今天小編就為大家分享一篇vue.js單文件組件中非父子組件的傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在研究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>
然后點擊的時候就能傳遞值了，還等什么，快來試試吧！
以上這篇vue.js單文件組件中非父子組件的傳值實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 配置多頁面應(yīng)用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Vue+ElementUI?實現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實現(xiàn)分頁查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了vue.js 實現(xiàn)點擊展開收起動畫效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒加載，需要的朋友可以參考下2018-08-08
插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們在組件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽,下面我們就來看看這三種方式的具體使用吧2023-09-09
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項目中遇到的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文主要介紹了vue實現(xiàn)登陸頁面開發(fā)實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06