vue.js單文件組件中非父子組件的傳值實(shí)例
最近在研究vue.js，總體來(lái)說(shuō)還算可以，但是在web開發(fā)群里有一些人問在單文件組件開發(fā)模式中非父子組件如何傳值的問題，今天在這里講講，希望對(duì)大家有所幫助！
在官網(wǎng)api中的這段講解很少，也很模糊；官網(wǎng)中說(shuō)明如下：
非父子組件通信：
有時(shí)候兩個(gè)組件也需要通信 (非父子關(guān)系)。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：
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()
}
})
如何獲取到這個(gè)空的vue對(duì)象 bus呢.在組件里面直接調(diào)用這個(gè)this.$root
<template>
<div class="title" @click="change(msg)">{{ msg }}</div>
</template>
<script>
export default {
name: 'first',
data() {
return {
msg: '我是首頁(yè)'
}
},
methods: {
change(text) {
this.$root.bus.$emit("hehe", text)
}
}
}
</script>
然后在另一個(gè)組件內(nèi)調(diào)用on事件接收,當(dāng)然在組件銷毀時(shí)解除綁定,使用on事件接收,當(dāng)然在組件銷毀時(shí)解除綁定,使用off方法
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
name: 'second',
data() {
return {
msg: '我是第二頁(yè)'
}
},
created() {
let that = this;
this.$root.bus.$on("hehe", function (t) {
that.msg = that.msg + t
})
}
}
</script>
然后點(diǎn)擊的時(shí)候就能傳遞值了，還等什么，快來(lái)試試吧！
以上這篇vue.js單文件組件中非父子組件的傳值實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 配置多頁(yè)面應(yīng)用的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10
Vue+ElementUI?實(shí)現(xiàn)分頁(yè)功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁(yè)查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫(kù)中數(shù)據(jù)比較多時(shí),就每次只查詢一部分來(lái)緩解服務(wù)器和頁(yè)面壓力。這里使用elementui的?Pagination?分頁(yè)?組件,配合mysql的limit語(yǔ)句，實(shí)現(xiàn)分頁(yè)查詢mysql數(shù)據(jù),下面來(lái)看看具體實(shí)現(xiàn)過程,希望對(duì)大家學(xué)習(xí)有所幫助2021-12-12
vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊展開收起動(dòng)畫效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
vue.js中toast用法及使用toast彈框的實(shí)例代碼
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒加載，需要的朋友可以參考下2018-08-08
插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們?cè)诮M件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽,下面我們就來(lái)看看這三種方式的具體使用吧2023-09-09
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
詳解Vue組件之間的數(shù)據(jù)通信實(shí)例
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-06-06
這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue實(shí)現(xiàn)登陸頁(yè)面開發(fā)實(shí)踐
本文主要介紹了vue實(shí)現(xiàn)登陸頁(yè)面開發(fā)實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06