vue父组件与子组件之间的传值

Posted 2023-02-28

参考技术A 好好生活 -- 即将拥有八块腹肌的程序员

1.父子组件的传值

        父传子通过props传递，子传父通过$emit

        还有兄弟传值公共的bus,夸组件传值vuex

传值的方式有很多种，这里就先介绍下简单的父子传值

父传子

通过在子组件上自定义属性，将data流入，子组件可以通过props来接受流入的值如图：

最后通过this.program的方式可以直接使用这个值

子传父

由于数据是单向流通的这里不能再通过props在子组件传值给父组件，需要通过$emit的方式去触发事件将子组件的值传递给父组件如图：

通过自定义方法在父组件methods中用于接收子组件传递的数据,子组件中通过this.$emit("weekFn", res.data.enable);语句，weekFn：在父组件中自定义的方法名，res.data.enable传递给父组件的数据，weekFn（value）value用于接收子组件传递过来的值。

说到这其实这个也可以进一步简化，通过sync修饰符将自定义方法和自定义属性简化为,如图：

通过this.$emit('update:program', res.data.enable)语法可以直接修改data的值，为什么能修改呢 看下下面的图就知道了

    

sync其实就是一个语法糖，他将自定义方法这一步简化了，通过.sync直接将赋值这一步合并。

关于公共bus，感觉功能并不是很实用，vuex可以完全替代这个这里就不详细讲解了，下一章就详细讲解vuex中的值传递。