组件之间传值

135 阅读1分钟

(作者笔记自用)

1.父子组件:父组件使用props向子组件传递数据,子组件通过父组件绑定的事件使用$emit()来触发。

    // 父组件
    <child :data="父组件data中的数据" @change_data="父组件methods中的方法"/>
    // 子组件
    ...
    props: ['data'],
    methods: {
        change_data(value){
            this.$emit('change_data', value);
        }
    }
    ...

2.子组件之间的传值:通过将共同的父组件作为一个通信的桥梁,子组件A先向父组件传值,父组件再向子组件B传值。

    其实就是将1中的两种方法合起来。
    1.子组件A=>父组件:组件A使用$emit传递
    2.父组件=>子组件B:组件B使用props接受

3.任意组件之间传值:如果一些数据被多个组件使用,建议直接使用vuex来管理这些共同的数据;我也使用过用全局事件总线的方法来传递数据。

[](Vuex 是什么? | Vuex (vuejs.org))

[](vue中的全局事件总线 - 掘金 (juejin.cn))