admin 管理员组文章数量: 1087139
vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程
vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程
文章目录
- vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程
- vue3.3已更新
- defineProps的改进
- 通用类型 generic
- defineEmits 的改进
- defineSlots 的使用
以下内容是目前vue3.3版本部分发布内容的比较详细的使用方法，如果有不对的地方，欢迎指出.
我会持续更新vue3的相关内容，谢谢！
此外，我还会定期更新最新的前端资讯，欢迎关注我，谢谢！
vue3.3已更新
defineProps的改进
比如我们有一个组件，它的接口是这样的
interface people{name:string,age:number
}
export type {people}
那我们在使用的时候，就可以这样
<script lang="ts" setup>
import {people} from './interface'
defineProps<people>()
</script><template><h1>{{ name }}</h1>
</template>
在父组件中调用
<HelloWorld name="any" :age="20" />
子组件中的defineProps也可以使用多个条件
<script lang="ts" setup>
import {people} from './interface'
defineProps<people&{speak?:string}>()
</script><template><h1>{{ name }}</h1><h2>{{ speak }}</h2>
</template>
父组件
<HelloWorld name="any" :age="20" speak="hello world"/>
感谢 @仟白 提供的反馈关于"使用3.3 的话 props默认值如何设置？"
withDefaults(defineProps<people>(),{ name:'anny', age:20 })
通用类型 generic
这里继续使用上面的接口：
interface people{name:string,age:number
}
子组建中的defineProps可以使用通用类型
<script setup lang="ts" generic="U extends people">
import { people } from '../interface'
defineProps<{peopleObj:U
}>()
</script><template><h1>{{ peopleObj }}</h1>
</template>
父组件中调用
<HelloWorld :peopleObj="{ name: 'any', age: 20 }" />
defineEmits 的改进
现在抛出事件的时候，我们可以更方便的设置事件的类型
看下之前的调用方法：
const emit = defineEmits<{(e: 'foo', id: number): void
}>()
emit('foo', 1)
父组件中调用
<HelloWorld @foo="foo" />
现在我们可以这样写：
const emit = defineEmits<{foo:[id:number]
}>()
emit('foo', 1)
父组件中调用
<HelloWorld @foo="foo" />
defineSlots 的使用
我们可以使用defineSlots来定义插槽的类型
首先看个例子，让我们定义一个插槽
<slot name="main"></slot>
父组件
<HelloWorld ><template #main><h1>hello world !</h1></template></HelloWorld>
可以看出来，以上一个具名插槽。
接下来我们将使用defineSlots来约束一个作用域插槽。
子组件：
<script setup lang="ts">
defineSlots<{main?: (props: { msg: string }) => any
}>()
</script><template><slot name="main" msg="tony"></slot>
</template>
其中，defineSlots中的main就是我们定义的插槽名称，props就是我们定义的插槽的参数，any就是我们定义的插槽的返回值。
这里我们限制了插槽的名称为main，并且插槽的参数为msg，返回值为any。
看下父组件的调用：
<HelloWorld ><template #main="slotProps"><h1>hello world {{slotProps.msg}}!</h1></template></HelloWorld>
需要注意的是，它们有一些限制：
当前的一些限制：
- volar / vue-tsc 中尚未实现必需的插槽检查。
- 插槽函数返回类型目前被忽略，可以是any，但我们将来可能会利用它来检查插槽内容。
本文标签： vue33最新发布defineProps generic defineEmits defineSlots教程
版权声明：本文标题：vue3.3最新发布defineProps,generic,defineEmits,defineSlots教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1700340985a404531.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论