码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-12-19 13:31:20      阅读:2      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!