组件的传值

组件
代理模式
子组件不能访问父组件.a

基本用法

• 父组件传递数据给子组件

语法：

 父组件中：
 <parent>
     <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

    data(){
         return {
             msg: [1,2,3]
         };
     }

 子组件中：
 //子组件通过props来接收数据
 props: ['childMsg']

• 子组件与父组件通信

  • 原理：这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

  • 语法：

    子组件:
    <template>
        <div @click="up"></div>
    </template>

    methods: {
        up() {
            this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据
        }
    }

    父组件:
    <div>
        <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
    </div>
    methods: {
        change(msg) {
            this.msg = msg;
        }
    }

• $emit() 方法发送监听，第一个参数upup为自定义事件名称

案例（演示）

实现app底部tabbar的点击切换效果