vue3组件传参

2024-01-08 06:06:16

1、props:

在这里插入图片描述

2、自定义事件子传父

在这里插入图片描述

3、mitt任意组件通讯

在这里插入图片描述
在这里插入图片描述

4、v-model通讯(v-model绑定在组件上)

(1)V2中父子组件的v-model通信，限制了popos接收的属性名必须为value和emit触发的事件名必须为input,所以有时会有冲突;

父组件:

在这里插入图片描述

子组件:

在这里插入图片描述

(2)V3中:限制了popos接收的属性名必须为modelValue和emit触发的事件名必须为update:modelValue

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7a67be664ba7445caf2aaa4c9c06bcb2.png
在这里插入图片描述

当然我们也可以改变props名,同时事件名也需要改变;----此时我们可以写多个v-model

在这里插入图片描述

5、$attrs祖孙组件通信

在这里插入图片描述

孙组件向祖组件传递数据时,只需要祖组件给孙组件传递一个函数:孙组件接收函数,调用函数向祖函数中传值

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_43502666/article/details/135442041
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。