Vue组件之间的通信方式

36 阅读1分钟

组件之间的通信方式有哪些?

答: 父子通信可用props、$emit、$parent、ref和$attrs。兄弟组件可用桥接的方式,有$parent和$root,还有我们常用的vuex。跨层级组件(爷孙组件)可以用provide+inject,还有vuex

那么在这里,我在项目中封装组件的时候,常常需要父子组件之间通信,这里我会用pros和$emit的方式去实现。比如封装输入框组件的时候,为了能实现父子组件之间数据的通信,我先在子组件用definePros去接受父组件传来的数据并赋值给props。

image.png

用defineEmits去接收一个更新数据事件('update:modelValue')并赋值给emit。

image.png

给Input标签绑定一个@input事件,用于监听输入框值的变化(绑定ptChange"函数)。

image.png

在这里,当输入框的值发生变化就会触发事件并调用函数,在函数中通过emit去触发更新数据事件,并把输入框的值交出发,来更新父组件的绑定的数据。

image.png

解析:"iptChange"函数,传入的参数“e”,可以用“e.target.value”获取Input框里的值,调用emit()去触发'update:modelValue',并把“e.target.value”的值传出去,以更新modelValue的值。

最后在父组件中给子组件的标签用v-model绑定数据即可实现父子组件的通信了。

image.png