兄弟组件传值
创建3个文件
1:bus,公交JS文件
2:哥哥组件
3:弟弟组件
bus.js代码
import Vue from 'vue'
export default new Vue()
哥哥组件代码:
<template>
<div id="gege">
<top title="兄弟组件"></top>
<p>这里是哥哥组件</p>
<p>这个是哥哥的数据----{{txt}}</p>
<button @click="btn()" class="btn">发送数据</button>
<didi></didi>
</div>
</template>
<script>
import bus from '../bus.js'
import didi from './didi.vue'
export default{
name:'gege',
data(){
return{
txt:'哥哥的数据内容'
}
},
methods:{
btn(){
bus.$emit('data',this.txt)
}
},
components:{didi}
}
</script>
<style>
</style>
弟弟组件代码:
<template>
<div id="didi">
<p>这里是弟弟组件</p>
<p>这个是弟弟的默认数据----{{msg}}</p>
</div>
</template>
<script>
import bus from '../bus.js'
export default{
name:'didi',
data(){
return{
msg:'默认值'
}
},
mounted(){
bus.$on('data',(msg)=>{
this.msg=msg
console.log(msg)
})
},
}
</script>
<style>
</style>