当前位置: 首页 > news >正文

vue3组件传参

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祖孙组件通信

在这里插入图片描述

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

在这里插入图片描述

http://www.lryc.cn/news/275651.html

相关文章:

  • React16源码: React中创建更新的方式及ReactDOM.render的源码实现
  • CentOS 7 系列默认的网卡接口名称
  • 多文件上传
  • 2024.1.7力扣每日一题——赎金信
  • C#中List<T>底层原理剖析
  • Leetcode 3003. Maximize the Number of Partitions After Operations
  • MySQL第一讲:MySQL知识体系详解(P6精通)
  • 逻辑回归简单案例分析--鸢尾花数据集
  • Python print 高阶玩法
  • Wpf 使用 Prism 实战开发Day09
  • 网络端口(包括TCP端口和UDP端口)的作用、定义、分类,以及在视频监控和流媒体通信中的定义
  • flink如何写入es
  • Java、Python、C++和C#的界面开发框架和工具的重新介绍
  • Java二叉树的遍历以及最大深度问题
  • Apollo 9.0搭建问题记录
  • 【心得】PHP文件包含高级利用攻击面个人笔记
  • [scala] 列表常见用法
  • python 使用urllib3发起post请求,携带json参数
  • 深入理解堆(Heap):一个强大的数据结构
  • 抖音在线查权重系统源码,附带查询接口
  • Spring Framework和SpringBoot的区别
  • 2024--Django平台开发-Django知识点(三)
  • Github 2024-01-08开源项目周报 Top14
  • vue3 的内置组件汇总
  • ARM工控机Node-red使用教程
  • Visual Studio 发布程序自动更新 ClickOnce和AutoUpdater测试
  • Codeforces Round 761 (Div. 2) E. Christmas Chocolates(思维题 树的直径 二进制性质 lca)
  • 知识图谱之汽车实战案例综述与前瞻分析
  • 网关Gateway
  • java 生成一个当前时间的时间搓