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