相信很多小伙伴都遇到过父子组件通信的业务,通常情况下,会采用defineProps和defineEmits来解决问题,如图:
父组件:
子组件:
当子组件值变化时,触发emits从而改变父组件中的value,但又是defineProps又是defineEmits,会不会显得很笨拙,所以vue3.3就提供了一个新特性defineModel,让我们来看看怎么用吧
因为这个特性是vue3.3实验性功能,所以需要在配置文件中把defineModel打开:
然后更改子组件代码:
这样也可以实现父子组件通信:
怎么样,是不是比之前的代码少了很多!