原来父子组件通信可以这么简单

42 阅读1分钟

相信很多小伙伴都遇到过父子组件通信的业务,通常情况下,会采用defineProps和defineEmits来解决问题,如图:

父组件:

image.png

子组件:

image.png

当子组件值变化时,触发emits从而改变父组件中的value,但又是defineProps又是defineEmits,会不会显得很笨拙,所以vue3.3就提供了一个新特性defineModel,让我们来看看怎么用吧

因为这个特性是vue3.3实验性功能,所以需要在配置文件中把defineModel打开:

image.png

然后更改子组件代码:

image.png

这样也可以实现父子组件通信:

image.png

怎么样,是不是比之前的代码少了很多!