兄弟组件传参——子传父，父传子

兄弟组件传参的方式：

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>

 

---

样式：