vue.js單文件組件中非父子組件的傳值實(shí)例
最近在研究vue.js，總體來說還算可以，但是在web開發(fā)群里有一些人問在單文件組件開發(fā)模式中非父子組件如何傳值的問題，今天在這里講講，希望對大家有所幫助！
在官網(wǎng)api中的這段講解很少，也很模糊；官網(wǎng)中說明如下：
非父子組件通信：
有時(shí)候兩個(gè)組件也需要通信 (非父子關(guān)系)。在簡單的場景下，可以使用一個(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對象 bus呢.在組件里面直接調(diào)用這個(gè)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>
然后在另一個(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: '我是第二頁'
}
},
created() {
let that = this;
this.$root.bus.$on("hehe", function (t) {
that.msg = that.msg + t
})
}
}
</script>
然后點(diǎn)擊的時(shí)候就能傳遞值了，還等什么，快來試試吧！
以上這篇vue.js單文件組件中非父子組件的傳值實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
gizp壓縮是一種http請求優(yōu)化方式，通過減少文件體積來提高加載速度。這篇文章主要介紹了Vue CLI3 開啟gzip壓縮,需要的朋友可以參考下2018-09-09
vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
詳解Vue單元測試Karma+Mocha學(xué)習(xí)筆記
本篇文章主要介紹了詳解Vue單元測試Karma+Mocha學(xué)習(xí)筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過在上傳過程中對文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實(shí)現(xiàn)用戶權(quán)限控制功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹的是vue-cli 介紹與安裝，vue-cli是和vue進(jìn)行深度組合的工具，可以快速幫我們創(chuàng)建vue項(xiàng)目，并且把一些腳手架相關(guān)的代碼給我們創(chuàng)建好。真正使用vue開發(fā)項(xiàng)目，都是用vue-cli來創(chuàng)建項(xiàng)目的，下面文章詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
今天小編就為大家分享一篇VUE單頁面切換動畫代碼(全網(wǎng)最好的切換效果)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue使用driver.js完成頁面引導(dǎo)功能的示例詳解
在Vue中,driver.js通常是指用于實(shí)現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫,它可以幫助開發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡單的給大家介紹一下vue如何使用driver.js完成頁面引導(dǎo)功能2023-08-08