vue组件传值

1、父组件向子组件传值

        使用自定义属性，示例代码如下：

        父组件

<Son :msg="message" :user="userInfo"></Son>

data() {
    return {
        message: "hello vue",
        userInfo: {
            name:"zs",
            age: 20
        }
    }
}

        子组件

<template>
    <div>
        <h5> Son组件 </h5>
        <p>父组件传过来的msg是：{{ msg }}</p>
        <p>父组件传过来的user值是： {{ user }}</p>
    </div>
</template>

<script>
    props: ["msg","user"]
</script>

2、子组件向父组件传值

        使用自定义事件，示例代码如下：

        子组件：

<template>
    <div>
        <h5>count的值是{{ count }}</h5>
        <button @click="add">count + 1</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            add() {
                this.count += 1
                // 修改数据时，通过$emit()触发自定义事件
                this.$emit('numChange', this.count)
            }
        }
    }
</script>

        父组件：

<Son @numChange="getNewCount"></Son>

<script>
export default {
    data() {
        return {
            countFromSon: 0
        }
    },
    methods: {
        getNewCount(val) {
            this.countFromSon = val
        }
    }
}
</script>

子组件中点击按钮时，子组件中触发 add 函数，同时 count 值发生变化，此时在子组件中的自定义事件 numChange 通过 emit 传递到父组件中并调用 getNewCount 函数，同时将子组件中的this.count 通过 val 形参赋值给父组件中的 countFromSon ，从而将子组件的值传给父组件。

3、兄弟组件之间传值

        在vue2.x中，兄弟组件之间数据共享使用EventBus

        ①创建EventBus.js模块，并向外共享一个Vue的实例对象，并在兄弟组件中引入

        ②在数据发送方，调用bus.$emit('事件名称', 要发送的数据)方法触发自定义事件

        ③在数据接收方，调用bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件