vue兄弟組件傳遞數(shù)據(jù)的實(shí)例
更新時(shí)間：2018年09月06日 10:00:07 作者：GoTime
今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
在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低版本安卓白屏問題的解決過程,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue實(shí)現(xiàn)全選組件封裝實(shí)例詳解
這篇文章主要介紹了vue?全選組件封裝,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
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ù)的過程
Vue從template到render函數(shù)的轉(zhuǎn)換經(jīng)歷模板解析、AST構(gòu)建、優(yōu)化、生成渲染函數(shù)等步驟,首先進(jìn)行詞法分析將模板拆解為tokens,再進(jìn)行語法分析構(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)無限滾動(dòng)效果
vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了解決element-ui的下拉框有值卻無法選中的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個(gè)文檔，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
插槽（slot）可以說在一個(gè)?Vue?項(xiàng)目里面處處都有它的身影，比如我們使用一些UI?組件庫的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹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