在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)用 }, })
我們再組件一設(shè)置一個事件調(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事件的時候,$emit會觸發(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就會觸發(fā)this.fn事件 }) } methods:{ fn:function(tar){ this.datas = tar } } } </script>
以上這篇vue兄弟組件傳遞數(shù)據(jù)的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com