在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è)置一個(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(){//組件一跟組件二都要綁定相同的eventNamethis.$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í)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長站。