zoukankan      html  css  js  c++  java
  • 兄弟组件传参——子传父,父传子

    兄弟组件传参的方式:

    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>

    样式:

  • 相关阅读:
    DICOMDIR结构
    给文件夹添加Everyone用户
    关于Predicate<T>委托
    开发者必备的6款源码搜索引擎
    Create XML Files Out Of SQL Server With SSIS And FOR XML Syntax
    create xml file from sql script
    DICOM中的入门概念
    小米note开启调试模式
    [转] Java基础知识——Java语言基础
    Java语言基本语法
  • 原文地址:https://www.cnblogs.com/wjl1124/p/14138887.html
Copyright © 2011-2022 走看看