vue子父组件通信怎么实现

Posted 2023-03-04

参考技术A vue的父子组件间通信可以总结成一句话：父组件通过 给子组件下发数据，子组件通过触发事件给父组件发送消息，即 向下传递，事件向上传递。

父组件向子组件传值（父传子）通过props

子组件的 props 选项能够接收来自父组件数据。

props 是单向绑定的，即只能父组件向子组件传递，不能反向。

传递的方式也分为两种：一种为静态数据，直接传数据，一种为动态传递，动态绑定属性

子组件通过 props 选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

$emit(eventName, […args] )

eventname是事件名称，在父组件中接受也需要一样，args是要传递的数据，如果只传一个值，默认$event接受

$emit 绑定一个自定义事件 event，当这个这个语句被执行到的时候，就会将参数 arg 传递给父组件，父组件通过 @event 监听并接收参数。

也就是子组件绑定父组件中的方法，通过回调，将数据传递给父组件。

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过 $emit;

原理是：vue 一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线。兄弟组件接收方式与父组件接收方式一样

如果子向父传值，传输的值需要接受修改，可以使用v-model，props使用value接受，事件使用input。