快捷導(dǎo)航

vue兄弟組件傳遞數(shù)據(jù)的實(shí)例

更新時(shí)間：2018年09月06日 10:00:07 作者：GoTime

今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在main.js里面設(shè)置data{eventHub:new Vue() }

new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App },
 data:{
  eventHub:new Vue() // 在main.js設(shè)置所有組件都能用調(diào)用
 },
  
})

我們?cè)俳M件一設(shè)置一個(gè)事件調(diào)用組件二的事件，傳遞數(shù)據(jù)給組件二

<template>
 <div v-on:click="on()"></div>
 
</template>
<script>
export default {
 data(){
 return{
 datas:"數(shù)據(jù)"
}
},
 methods:{
 on(){
  this.$root.eventHunb.$emit("eventName",this.datas) 
 
 //$emit是觸發(fā)事件，當(dāng)我們點(diǎn)擊on事件的時(shí)候，$emit會(huì)觸發(fā)其他組件的eventName事件， 把this.datas數(shù)據(jù)傳遞到其他組件中
 }
 }
 
}
 
</scrpt>

組件二被觸發(fā)的事件，接受的參數(shù)

<template>
<div>{{datas}}</div>
</template>
<script>
exports default{
data(){
return{
datas:""
}
},
created(){
//組件一跟組件二都要綁定相同的eventName
this.$root.eventHub.$on("eventName",(tar) = > {

this.fn(tar) 
//$on是監(jiān)聽事件，如果組件一得$emit觸發(fā)了，$on就會(huì)觸發(fā)this.fn事件

})
}
methods:{
fn:function(tar){
this.datas = tar
}
}

}
</script>

以上這篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue實(shí)現(xiàn)全選組件封裝實(shí)例詳解
這篇文章主要介紹了vue?全選組件封裝,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-02-02
Vue中列表渲染指令v-for的基本用法詳解
v-for指令是在模板編譯的代碼生成階段實(shí)現(xiàn)的，當(dāng)遍歷數(shù)組或?qū)ο髸r(shí)需要使用列表渲染指令v-for。本文主要為大家介紹了v-for指令的基本用法，希望對(duì)大家有所幫助
2023-04-04
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-08-08
vue的template模板是如何轉(zhuǎn)為render函數(shù)的過(guò)程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進(jìn)行詞法分析將模板拆解為tokens,再進(jìn)行語(yǔ)法分析構(gòu)建AST,然后對(duì)AST進(jìn)行靜態(tài)標(biāo)記和提升優(yōu)化,最后轉(zhuǎn)換成JavaScript渲染函數(shù),生成虛擬DOM,完成組件的渲染和更新,實(shí)現(xiàn)了模板的高效轉(zhuǎn)化
2024-10-10
使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果
vue-infinite-scroll插件可以無(wú)限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果,需要的朋友可以參考下
2018-06-06
解決element-ui的下拉框有值卻無(wú)法選中的情況
這篇文章主要介紹了解決element-ui的下拉框有值卻無(wú)法選中的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
使用VitePress搭建及部署vue組件庫(kù)文檔的示例詳解
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫(kù)文檔,本文以element-plus作為示例來(lái)搭建一個(gè)文檔，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
Vue3系列教程之插槽slot詳解
插槽（slot）可以說(shuō)在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，今天通過(guò)本文給大家介紹vue3插槽slot的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2022-08-08
Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式
這篇文章主要介紹了Vue3之toRefs和toRef在reactive中的一些應(yīng)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03