vue3传值组件传参

大聪明2_0
331 阅读1分钟

（一）父传子

image.png

父组件绑定要传递的值 子组件用defineProps接收 （defineProps不用引用）

（二）子传父

image.png

子组件用defineEmits绑定要传递的值 注意是一个数组 父组件用@事件名接收，@后面的名字要和子组件的一致

（三） 用ref获取数据

image.png

解决父组件获取不到子组件里面的方法

image.png

在子组件中开启defineExpose

image.png

应用场景：

封装一个弹框组件在父组件中引用这个弹框组件，父组件想要改变子组件的一个方法

image.png

跨组件传参 provide inject

image.png

子组件想要改变父组件里面的方法，由于单向数据流是不能直接进行改变的，要在父组件里面改变然后父组件把改变的方法传递给子组件，子组件进行修改

image.png

avatar
文章
阅读
粉丝