我正在尝试用Vue3脚本设置语法替换我的Vue2选项API属性对象代码。
现有:
type: {
type: String,
default: 'button',
validator: (prop) => ['button', 'submit', 'reset'].includes(prop)
}
目前为止我有这个
<script lang="ts" setup>
interface Props {
type?: string;
}
const props = withDefaults(defineProps<Props>(), { type: 'button' });
</script>
但是我找不到任何关于如何在脚本设置语法中处理prop验证器的信息
6条答案
按热度按时间trnvg8h31#
您可以在
defineProps
中使用与Options API相同的结构。(DOCS)lsmepo6l2#
我相信我已经解决了这个问题,虽然我对typescript还是个新手,但这应该是等效的(将在typescript而不是vue runtime中验证)
2ul0zpep3#
跟进@Titan的回答,我喜欢用一种可以直接访问脚本中的 prop 的方式来写它。
尽管我建议将prop名称从
type
更改为其他名称,因为typescript可能会误解实际类型声明的prop名称。lp0sw83n4#
对于那些也来自谷歌,因为Vue文档不是很清楚这一点,你可以做一个直接转换使用Vue 2风格选项格式以及:
k4ymrczo5#
最后我用这个结尾🤷♂️
0h4hbjxa6#
您可以这样做以避免重复的值。