zoukankan      html  css  js  c++  java
  • Vue父子组件通信——prop和$emit

    总结

    1)父组件通过子组件的prop属性,将数据传送给子组件
       (代码第三行的cityName就是子组件的属性)
    2)子组件通过$emit监测父组件中的事件(代码最后一行)

    3)兄弟组件传值san

      还是通过 $emit 和 props 结合的方式

    父组件

    <template>
      <div id="father">
        <son  @btnClick="handleClick" :cityName="msg"></son>
      </div>
    </template>
    
    <script>
      import son from './components/son'
    
      export default {
        el: '#father',
        data() {
          return {
            msg: ''      //  要传给子组件的数据
          }
        },
        methods: {
          handleClick() {
            this.msg = '北京'   //  点击按钮时触发函数,显示hello
          }
        },
        components: {
          'son': son
        }
      }
    </script>

    子组件

    <template>
      <div>
        <button @click="sendCity">点击</button>
        <h1>父组件传过来的数据是:{{cityName}}</h1>
      </div>
    </template>
    
    <script>
      export default {
        props: ['cityName'],   //  子组件的自定义属性
        methods: {
          sendCity() {
            this.$emit('btnClick');   //  使用$emit()监测btnClick事件
          }
        }
      }
    </script>

     兄弟组建传值

     在父组件中给要传值的两个兄弟组件都绑定要传的变量,并定义事件

    // 父组件
    <child-a :myName="name" />
    <child-b :myName="name" @changeName="editName" />  
        
    export default {
        data() {
            return {
                name: 'John'
            }
        },
        components: {
            'child-a': ChildA,
            'child-b': ChildB,
        },
        methods: {
            editName(name) {
                this.name = name
            },
        }
    }

    在子组件B中接收变量和绑定触发事件

    // child-b 组件
    <p>姓名:{{ myName }}</p>
    <button @click="changeName">修改姓名</button>
        
    <script>
    export default {
        props: ["myName"],
        methods: {
            changeName() {
                this.$emit('changeName', 'Lily')   // 触发事件并传值
            }
        }
    }
    </script>
    // child-a 组件
    <p>姓名:{{ newName }}</p>
        
    <script>
    export default {
        props: ["myName"],
        computed: {
            newName() {
                if(this.myName) { // 判断是否有值传过来
                    return this.myName
                }
                return 'John' //没有传值的默认值
            }
        }
    }
    </script>

    即:当子组件B 通过 $emit() 触发了父组件的事件函数 editName,改变了父组件的变量name 值,父组件又可以把改变了的值通过 props 传递给子组件A,从而实现兄弟组件间数据传递。

    总结:

    • 父子通信: 父向子传递数据是通过 props,子向父是通过 $emit;通过 $parent / $children 通信;$ref 也可以访问组件实例;provide / inject ; $attrs/$listeners ;

    • 兄弟通信: EventBus;Vuex;

    • 跨级通信: EventBus;Vuex;provide / inject ;$attrs/$listeners;

  • 相关阅读:
    BZOJ 1040 (ZJOI 2008) 骑士
    BZOJ 1037 (ZJOI 2008) 生日聚会
    ZJOI 2006 物流运输 bzoj1003
    ZJOI 2006 物流运输 bzoj1003
    NOI2001 炮兵阵地 洛谷2704
    NOI2001 炮兵阵地 洛谷2704
    JLOI 2013 卡牌游戏 bzoj3191
    JLOI 2013 卡牌游戏 bzoj3191
    Noip 2012 day2t1 同余方程
    bzoj 1191 [HNOI2006]超级英雄Hero——二分图匹配
  • 原文地址:https://www.cnblogs.com/ranyihang/p/13209734.html
Copyright © 2011-2022 走看看