Vue 3.3新增了一些语法糖和宏，包括泛型组件、defineSlots、defineEmits、defineOptions
defineProps
- 父子组件传参
<template> <div> <Child name="xiaoman"></Child> </div> </template> <script lang='ts' setup> import Child from './views/child.vue' </script> <style></style>
子组件使用defineProps接受值
<template> <div> {{ name }} </div> </template> <script lang='ts' setup> defineProps({ name: String }) </script>
- 使用TS字面量模式
<template> <div> {{ name }} </div> </template> <script lang='ts' setup> defineProps<{ name:string }>() </script>
Vue3.3新增 defineProps 可以接受泛型
<Child :name="['xiaoman']"></Child> //-------------子组件----------------- <template> <div> {{ name }} </div> </template> <script generic="T" lang='ts' setup> defineProps<{ name:T[] }>() </script>
defineEmits
- 父组件
<template> <div> <Child @send="getName"></Child> </div> </template> <script lang='ts' setup> import Child from './views/child.vue' const getName = (name: string) => { console.log(name) } </script> <style></style>
子组件常规方式派发Emit
<template> <div> <button @click="send">派发事件</button> </div> </template> <script lang='ts' setup> const emit = defineEmits(['send']) const send = () => { // 通过派发事件，将数据传递给父组件 emit('send', '我是子组件的数据') } </script>
子组件TS字面量模式派发
<template> <div> <button @click="send">派发事件</button> </div> </template> <script lang='ts' setup> const emit = defineEmits<{ (event: 'send', name: string): void }>() const send = () => { // 通过派发事件，将数据传递给父组件 emit('send', '我是子组件的数据') } </script>
Vue3.3 新写法更简短
<template> <div> <button @click="send">派发事件</button> </div> </template> <script lang='ts' setup> const emit = defineEmits<{ 'send':[name:string] }>() const send = () => { // 通过派发事件，将数据传递给父组件 emit('send', '我是子组件的数据') } </script>
defineExpose
没变化
defineExpose({ name:"张三" })
defineSlots
- 父组件
<template> <div> <Child :data="list"> <template #default="{item}"> <div>{{ item.name }}</div> </template> </Child> </div> </template> <script lang='ts' setup> import Child from './views/child.vue' const list = [ { name: "张三" }, { name: "李四" }, { name: "王五" } ] </script> <style></style>
子组件 defineSlots只做声明不做实现 同时约束slot类型
<template> <div> <ul> <li v-for="(item,index) in data"> <slot :index="index" :item="item"></slot> </li> </ul> </div> </template> <script generic="T" lang='ts' setup> defineProps<{ data: T[] }>() defineSlots<{ default(props:{item:T,index:number}):void }>() </script>
defineOptions
- 主要是用来定义 Options API 的选项
常用的就是定义name 在seutp 语法糖模式发现name不好定义了需要在开启一个script自定义name现在有了defineOptions就可以随意定义name了
defineOptions({ name:"Child", inheritAttrs:false, })
defineModel
由于该API处于实验性特性 可能会被删除暂时不讲
warnOnce( `This project is using defineModel(), which is an experimental ` + `feature. It may receive breaking changes or be removed in the future, so ` + `use at your own risk.\n` + `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.` )
源码解析
- core\packages\compiler-sfc\src\script\defineSlots.ts
export function processDefineSlots( ctx: ScriptCompileContext, node: Node, declId?: LVal ): boolean { //是否调用了defineSlots if (!isCallOf(node, DEFINE_SLOTS)) { return false } //是否重复调用了defineSlots if (ctx.hasDefineSlotsCall) { ctx.error(`duplicate ${DEFINE_SLOTS}() call`, node) } //函数将 ctx 对象的 hasDefineSlotsCall 属性设置为 true，表示已经调用了 DEFINE_SLOTS 函数 ctx.hasDefineSlotsCall = true //然后函数检查传递给 DEFINE_SLOTS 函数的参数个数是否为零，如果不是，则函数抛出错误，指示 DEFINE_SLOTS 函数不接受参数。 if (node.arguments.length > 0) { ctx.error(`${DEFINE_SLOTS}() cannot accept arguments`, node) } //接下来，如果函数接收到了一个可选的表示插槽定义的标识符的节点对象， //则函数使用 ctx.s.overwrite //方法将该节点对象替换为一个表示使用插槽的帮助函数的调用 if (declId) { ctx.s.overwrite( ctx.startOffset! + node.start!, //开始位置 ctx.startOffset! + node.end!, //结束位置 `${ctx.helper('useSlots')}()` //替换的内容 此时就拥有了类型检查 ) } return true }
- core\packages\compiler-sfc\src\script\defineOptions.ts
export function processDefineOptions( ctx: ScriptCompileContext, node: Node ): boolean { //是否调用了defineOptions if (!isCallOf(node, DEFINE_OPTIONS)) { return false } //是否重复调用了defineOptions if (ctx.hasDefineOptionsCall) { ctx.error(`duplicate ${DEFINE_OPTIONS}() call`, node) } //defineOptions()不能接受类型参数 if (node.typeParameters) { ctx.error(`${DEFINE_OPTIONS}() cannot accept type arguments`, node) } //defineOptions()必须接受一个参数 if (!node.arguments[0]) return true //函数将 ctx 对象的 hasDefineOptionsCall 属性设置为 true，表示已经调用了 DEFINE_OPTIONS 函数 ctx.hasDefineOptionsCall = true //函数将 ctx 对象的 optionsRuntimeDecl 属性设置为传递给 DEFINE_OPTIONS 函数的参数 ctx.optionsRuntimeDecl = unwrapTSNode(node.arguments[0]) let propsOption = undefined let emitsOption = undefined let exposeOption = undefined let slotsOption = undefined //遍历 optionsRuntimeDecl 的属性，查找 props、emits、expose 和 slots 属性 if (ctx.optionsRuntimeDecl.type === 'ObjectExpression') { for (const prop of ctx.optionsRuntimeDecl.properties) { if ( (prop.type === 'ObjectProperty' || prop.type === 'ObjectMethod') && prop.key.type === 'Identifier' ) { if (prop.key.name === 'props') propsOption = prop if (prop.key.name === 'emits') emitsOption = prop if (prop.key.name === 'expose') exposeOption = prop if (prop.key.name === 'slots') slotsOption = prop } } } //禁止使用defineOptions()来声明props、emits、expose和slots if (propsOption) { ctx.error( `${DEFINE_OPTIONS}() cannot be used to declare props. Use ${DEFINE_PROPS}() instead.`, propsOption ) } if (emitsOption) { ctx.error( `${DEFINE_OPTIONS}() cannot be used to declare emits. Use ${DEFINE_EMITS}() instead.`, emitsOption ) } if (exposeOption) { ctx.error( `${DEFINE_OPTIONS}() cannot be used to declare expose. Use ${DEFINE_EXPOSE}() instead.`, exposeOption ) } if (slotsOption) { ctx.error( `${DEFINE_OPTIONS}() cannot be used to declare slots. Use ${DEFINE_SLOTS}() instead.`, slotsOption ) } return true }
