创建一个eventVue.js文件
import Vue from 'vue'
export default new Vue
父
<template>
<div>
<div>父</div>
<v-youngerChild></v-youngerChild>
<v-bigChild></v-bigChild>
</div>
</template> <script>
import YoungerChild from './Child'
import BigChild from './BigChild'
export default {
components:{
'v-youngerChild':YoungerChild,
'v-bigChild':BigChild
}
}
</script>
哥哥
<template>
<div>
<div>哥哥</div>
{{message}}
</div>
</template> <script>
import eventVue from '../assets/js/eventVue.js'
export default {
data(){
return{
message:'哥哥'
}
},
created(){
eventVue.$on("myFun",(message)=>{
this.message=message
})
}
}
</script>
弟弟
<template>
<div>
<div>弟弟</div>
<button @click="abtn">点击</button>
</div>
</template>
<script>
import eventVue from '../assets/js/eventVue.js'
export default {
data(){
return{
msg:'弟弟'
}
},
methods:{
abtn(){
eventVue.$emit("myFun",this.msg)
}
}
}
</script>