vue面试-父子通信

78 阅读1分钟

父子通信

父传子

<script setup> 中子组件可以使用vue提供的defineProps函数选择接受的属性,defineProps返回一个对象,包含接受的属性(如果父组件传有属性的话,支持v-bind的属性)

子组件的useAttrs包含所有的子组件没有显式接受的属性(不在defineProps里的属性)

provide和inject,不要求必须是父子关系,只要是嵌套祖先关系都可以使用,root组件通过provide提供数据(provide(key,val)),后代组件通过inject拿到数据。

子传父

父还是通过props传给子,也提供修改函数,子组件通过defineEmits注册自定义事件,在需要的地方调用emit(注册的自定义事件,参数)

或者通过第三方库mitt(基于eventBus,发布订阅者模式)

作用域插槽:在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据 子组件插槽内的数据传给父组件,可以结合父组件数据一起渲染 image.png