Vue 3.3 编译宏 vue3.3新增了一些语法糖和宏,包括泛型组件、defineSlots、defineEmits、defineOptions

Vue 3.3新增了一些语法糖和宏,包括泛型组件、defineSlots、defineEmits、defineOptions

defineProps

  • 父组件传参
<template><Child name="my"></Child>
</template>
<script setup lang="ts">
import Child from "./views/Child.vue";
</script><style scoped></style>
  • 子组件接收参数
<template><div>{{ name }}</div>
</template>
<script setup lang="ts">
defineProps({name: String,
});
</script>
  • 使用TS字面量模式
<template><div>{{ name }}</div>
</template>
<script setup lang="ts">
defineProps<{ name: string }>();
</script>
  • Vue3.3及以上 新增defineProps 可以接受泛型
    父组件传 数组
<template><Child :name="['my','zs']"></Child>
</template>
<script setup lang="ts">
import Child from "./views/Child.vue";
</script>

子组件接收
第一种(普通方式):

<template><div>{{ name }}</div>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
defineProps({name: {type: Array as PropType<string[]>,required: true,},
});
</script>
<style scoped lang="scss"></style>

第二种(ts泛型自变量方式):

<template><div>{{ name }}</div>
</template>
<script setup lang="ts" generic="T">
defineProps<{ name: T[] }>();
</script>
<style scoped lang="scss"></style>
vue3.3 以及以上 对defineProps 的改进 新增泛型需要在script标签上加上 generic=“T"

defineEmits

  • 父组件
<template><Child @send="getName"></Child>
</template>
<script setup lang="ts">
import Child from "./views/Child.vue";
const getName = (name: string) => {console.log(name);
};
</script>
  • 子组件常规方式派发emit
<template><button @click="send">点击派发</button>
</template>
<script setup lang="ts">
const emit = defineEmits(["send"]);
const send = () => {// 通过派发事件,将数据传递给父组件emit("send", "子组件的数据");
};
</script>
  • 子组件TS字面量模式派发
<template><button @click="send">点击派发</button>
</template>
<script setup lang="ts">
// 没有返回值就写个 void
const emit = defineEmits<{ (event: "send", name: string): void }>();
const send = () => {// 通过派发事件,将数据传递给父组件emit("send", "子组件的数据");
};
</script>
  • vue3.3 及以上 新写法更简短
<template><button @click="send">点击派发</button>
</template>
<script setup lang="ts">
const emit = defineEmits<{ send: [name: string] }>();
const send = () => {// 通过派发事件,将数据传递给父组件emit("send", "子组件的数据");
};
</script>

defineOptions

  • 主要是用来定义 Options API 的选项,它里面的属性跟optionsAPI 一模一样的
  • Vue3.3 及以上 内置了 defineOptions 不需要再去下载插件了

常用的就是定义name在setup语法糖模式发现name不好定义了 需要在开启一个script自定义name 现在有了defineOptions就可以随意定义name了
常用的属性 定义name
注意:不要在defineOptions里定义props emits 等 它会报错


defineOptions({name: "my",
});

在这里插入图片描述

defineSlots

  • 父组件
<template><Child :data="list"><template #default="{ item }"><div>{{ item.name }}</div></template></Child>
</template>
<script setup lang="ts">
import Child from "./views/Child.vue";
const list = [{ name: "zs" }, { name: "ls" }, { name: "wu" }];
</script>
  • 子组件 defineSlots只做声明不做实现 同时约束slot类型
<template><ul><li v-for="(item, index) in data"><slot :index="index" :item="item"></slot></li></ul>
</template>
<script generic="T" setup lang="ts">
defineProps<{ data: T[] }>();
defineSlots<{default(Props: { item: T, index: number });
}>();
</script>

源码:单文件就是sfc 编译宏都是放在script里面 一般就是在script里面引入编译宏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/322851.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

成本降低 90%,出海社交平台 Typing 基于 Databend 的大数据探

Typing&#xff08;输入中科技&#xff09;成立于 2022 年&#xff0c;是一家主要面向东南亚、拉美、中东等海外地区提供社交平台的出海企业。其社交平台类似于国内的 Soul、陌陌等&#xff0c;提供视频直播、语音聊天室、短视频、生活分享、文字聊天等社交功能&#xff0c;注册…

Axure中继器介绍以及案例分享

中继器是 Axure 中一个比较高阶的应用&#xff0c;它可以让我们在纯静态网页中模拟出类似带有后台数据交互的增删改查的效果。 一、中继器的基本使用方法&#xff1a; 整体流程分为三个步骤 ☆创建中继器 我们先在 Axured画布中拖入一个中继器元件 双击中继器后的效果 打开之…

一套C语言开发的 PACS影像系统源码 PACS系统的基本概念、系统业务流程

PACS系统基本概念 PACS&#xff0c;全称 Picture Archiving and Communication Systems&#xff0c;中文意为影像归档和通信系统。它是应用于医院影像科室的一种系统&#xff0c;主要任务是把日常产生的各种医学影像&#xff08;包括核磁&#xff0c;CT&#xff0c;超声&#…

BeyondCompare4 下载\安装\免费使用

1. 官网 下载 Download Beyond Compare Free Trial 2. 安装&#xff08;无脑下一步&#xff09; 3.永久免费使用 修改注册表 A、在搜索栏中输入 regedit &#xff0c;打开注册表 B、 删除项目&#xff1a;计算机 \HKEY_CURRENT_USER\Software\ScooterSoftware\Beyond Compar…

命运交织的节点:分布式事务最终一致性的心跳共鸣纪实

关注微信公众号 “程序员小胖” 每日技术干货&#xff0c;第一时间送达&#xff01; 引言 在当今云计算和微服务架构大行其道的时代&#xff0c;分布式系统成为了构建高可用、高性能应用的基石。然而&#xff0c;随着系统规模的扩张&#xff0c;数据的一致性问题如同幽灵般萦…

mib browser读取mib文件的oid(飞塔防火墙为例)

在配置zabbix监控的时候,配置监控项最为麻烦,一般我们都会套用模板,这种方式比较简单,但是有些设备就是没有现成的zabbix模板,怎么办? 今天我们使用MIB Browser来获取设备SNMP的OID,然后加入zabbix 。 1.什么是MIB Browser SNMP客户端工具MIB Browser, 全名iReasonin…

华为手机 鸿蒙系统-android studio识别调试设备,开启adb调试权限

1.进入设置-关于手机-版本号&#xff0c;连续点击7次 认证&#xff1a;有锁屏密码需要输入密码&#xff0c; 开启开发者配置功能ok 进入开发者配置界面 打开调试功能 重新在androd studio查看可运行running devices显示了&#xff0c; 不行的话&#xff0c;重启一下android …

照片生成ai漫改头像生成漫画全套教程免费(自取)

今天给大家分享一一个AI漫改头像&#xff0c;轻松日增1000&#xff0c;简单操作好上手的一个互联网新项目&#xff0c;哈那其实AI漫改头像也火了差不多有半年左右了&#xff0c; 那其实利用AI软件将真人的照片生成漫画的形象&#xff0c;这个看起来很简单的方法却在小红书上大…

Vue入门到关门之Vue3学习

一、常用API 注意&#xff1a;本文项目均使用脚手架为 Vite 1、setup函数 &#xff08;1&#xff09;介绍 如果在项目中使用配置项API&#xff0c;那么写起来就和vue2的写法是一样的&#xff1b;但是如果在项目中写的是组合式API&#xff0c;那么组件中所用到的&#xff1a…

《架构即未来》读后感

目录 一、引言 二、《架构即未来》读后感 1、主题的简要介绍 2、我的看法和理解 3、作者的优点和传递的信息 4、思想如何适用于当今社会 三、《架构即未来》对于企业发展的影响具体体现在哪些方面&#xff1f; 一、引言 任何一个持续成长的公司最终都需要解决系统、组织…

关于GitHub仓库建立及提交问题

文章目录 前言GitHub仓库创建token令牌的获取GitHub克隆到本地GitHub上传文件 前言 为了整一个GitHub仓库然后上传文件&#xff0c;笔者看了不下100篇博客&#xff0c;20段教程&#xff0c;最后在两位大佬的帮助下&#xff0c;才整明白了&#x1f62d; 先提前说一嘴从 2021年8月…

python实现txt文件内容对比功能

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.代码 三.演示 四.代码分析 一.前言 内容对比是一种常见的信息分析和研究方法,主要涉及对不同来源、类型或版本的内容进行比

【JAVA】类加载过程,以及类加载器

类加载过程&#xff0c;以及类加载器 一、类加载的过程二、类加载器介绍三、跨类加载三、举例说明 一、类加载的过程 类加载是Java虚拟机&#xff08;JVM&#xff09;将类文件加载到内存中并转换成对应的类对象的过程。它确保了类文件能够正确加载并转换成可执行的类对象&…

UE4_Water插件_Buoyancy组件使用

water插件提供了一个浮力Actor蓝图类。 需要注意的几个问题: 1、StaticMesh需要替换根组件。 2、需要模拟物理设置质量。 3、需要添加浮力组件,设置浮力点,应用水中牵引力。

Unity Animation--动画剪辑

Unity Animation--动画剪辑 动画剪辑 动画剪辑是Unity动画系统的核心元素之一。Unity支持从外部来源导入动画&#xff0c;并提供创建动画剪辑的能力使用“动画”窗口在编辑器中从头开始。 外部来源的动画 从外部来源导入的动画剪辑可能包括&#xff1a; 人形动画 运动捕捉…

【Linux】Linux——Centos7安装RabbitMQ

目录 安装包准备socaterlang 安装rabbitmq安装命令启动rabbitmq&#xff0c;两种方式查看rabbitmq 启动后的情况配置并开启网页插件关闭防火墙或开放端口测试登录问题配置web端访问账号密码和权限添加用户&#xff0c;后面两个参数分别是用户名和密码.添加权限修改用户角色再次…

24_Scala集合Map

文章目录 Scala集合Map1.构建Map2.增删改查3.Map的get操作细节 Scala集合Map –默认immutable –概念和Java一致 1.构建Map –创建kv键值对 && kv键值对的表达 –创建immutable map –创建mutable map //1.1 构建一个kv键值对 val kv "a" -> 1 print…

十四五”智慧城市:视频大数据汇聚系统2.0建设方案与特点分析

一、背景需求分析 随着科技的不断发展&#xff0c;智慧城市的建设已经成为城市发展的重要方向。视频汇聚系统作为智慧城市建设的重要组成部分&#xff0c;已经得到了广泛的应用和推广。视频汇聚系统是智慧城市中非常重要的组成部分&#xff0c;它利用摄像头和传感器技术来收集…

压缩机继电器EOCRDS-30NY7Q升级后型号:EOCRDS3-30S

EOCR-DS3系列型号&#xff1a; EOCRDS3-05S EOCRDS-05S EOCRDS1-05S EOCRDS3-30S EOCRDS-30S EOCRDS1-30S EOCRDS3-60S EOCRDS-60S EOCRDS1-60S EOCRDS3-05W EOCRDS-05W EOCRDS1-05W EOCRDS3-30W EOCRDS-30W EOCRDS1-30W EOCRDS3-60W EOCRDS-60W EOCRDS1-60W EOCR-DS3T-…

分享10个高质量宝藏网站~

分享一波高质量宝藏网站~ 这10个宝藏网站&#xff0c;个个都好用到爆&#xff0c;娱乐、办公、学习都能在这里找到&#xff01; 1、Z-Library https://zh.zlibrary-be.se/ 世界最大的免费电子书下载网站&#xff01;电子书资源超千万&#xff0c;不过这个网站不太稳定&#…