标签:osi strong station ges get box eve from 样式
兄弟组件传参的方式:
1.子传父,父传子
2.vuex
3.eventBus
一、通过父亲进行传递
父组件
<template>
<div class="box2">
<div class="bro">
<brother :messagebro="message1" @broevent="messagesis($event)"></brother>
</div>
<div class="sis">
<sister :messagesis="message2" @sisevent="messagebro($event)"></sister>
</div>
</div>
</template>
<script>
import brother from ‘../../components/demo8/brother.vue‘
import Sister from ‘../../components/demo8/sister.vue‘
export default {
components: { brother, Sister },
name: ‘demo8‘,
data () {
return {
message1: ‘‘,
message2: ‘‘
}
},
methods: {
messagesis (message) {
console.log(message)
this.message2 = message
},
messagebro (message) {
this.message1 = message
}
}
}
</script>
<style lang="less" scoped>
</style>
兄弟组件1
<template>
<div>
<span>哥哥组件</span>
<Button type="primary" @click="messagetosis">给妹妹传值</Button>
<span>{{messagebro}}</span>
</div>
</template>
<script>
import demo8 from ‘../../view/stationManage/demo8‘
export default {
name: ‘brother‘,
props: [‘messagebro‘],
data () {
return {
}
},
methods: {
messagetosis () {
this.$emit(‘broevent‘, ‘回家吃饭了‘)
}
}
}
</script>
兄弟组件2
<template>
<div>
<span>妹妹组件</span>
<Button type="primary" @click="messagetobro">给哥哥传值</Button>
<span>{{messagesis}}</span>
</div>
</template>
<script>
import demo8 from ‘../../view/stationManage/demo8‘
export default {
name: ‘sister‘,
props: [‘messagesis‘],
data () {
return {
}
},
methods: {
messagetobro () {
this.$emit(‘sisevent‘, ‘回家吃饭‘)
}
}
}
</script>
样式:


标签:osi strong station ges get box eve from 样式
原文地址:https://www.cnblogs.com/wjl1124/p/14138887.html