组件之间的通信方式有哪些?
答:
父子通信可用props、$emit、$parent、ref和$attrs
。兄弟组件可用桥接的方式,有$parent和$root
,还有我们常用的vuex
。跨层级组件(爷孙组件)可以用provide+inject
,还有vuex
。
那么在这里,我在项目中封装组件的时候,常常需要父子组件之间通信,这里我会用pros和$emit的方式去实现。比如封装输入框组件的时候,为了能实现父子组件之间数据的通信,我先在子组件用definePros去接受父组件传来的数据并赋值给props。
用defineEmits去接收一个更新数据事件('update:modelValue')并赋值给emit。
给Input标签绑定一个@input事件,用于监听输入框值的变化(绑定ptChange"函数)。
在这里,当输入框的值发生变化就会触发事件并调用函数,在函数中通过emit去触发更新数据事件,并把输入框的值交出发,来更新父组件的绑定的数据。
解析:"iptChange"函数,传入的参数“e”,可以用“e.target.value”获取Input框里的值,调用emit()去触发'update:modelValue',并把“e.target.value”的值传出去,以更新modelValue的值。
最后在父组件中给子组件的标签用v-model绑定数据即可实现父子组件的通信了。