详解如何在Vue3使用＜scriptlang=“ts“setup＞语法糖
Vue 3.2 引入了语法，这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它，然后可以删除组件中的一些样板。script setupsetupscript
让我们举一个实际的例子，并将其迁移到这个语法！
迁移组件
以下组件有两个道具（要显示的和一个标志）。基于这两个道具，计算模板中显示的小马图像的URL（通过另一个组件）。该组件还会在用户单击它时发出一个事件。PonyponyModelisRunningImageselected
Pony.vue
<template>
<figure @click="clicked()">
<Image :class="lazy" data-src="ponyImageUrl" :alt="ponyModel.name" />
<figcaption>{{ ponyModel.name }}</figcaption>
</figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
export default defineComponent({
components: { Image },
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
setup(props, { emit }) {
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
return { ponyImageUrl, clicked };
}
});
</script>
第一步，将属性添加到元素中。然后，我们只需要保留函数的内容：所有的样板都可以消失。您可以删除 和 中的函数：setupscriptsetupdefineComponentsetupscript
Pony.vue
<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
components: { Image },
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
return { ponyImageUrl, clicked };
</script>
隐式返回
我们还可以删除末尾的：在模板中声明的所有顶级绑定（以及所有导入）都自动可用。所以这里和可用，无需返回它们。returnscript setupponyImageUrlclicked
声明也是如此！导入组件就足够了，Vue 知道它在模板中使用：我们可以删除声明。componentsImagecomponents
Pony.vue
<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
</script>
我们差不多做到了：我们现在需要迁移 和 声明。propsemits
defineProps
Vue 提供了一个助手，你可以用它来定义你的道具。它是一个编译时帮助程序（一个宏），所以你不需要在代码中导入它：Vue 在编译组件时会自动理解它。defineProps
defineProps返回道具：
const props = defineProps({
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
});
defineProps将前一个声明作为参数接收。但是我们可以为TypeScript用户做得更好！props
defineProps是一般类型化的：你可以在没有参数的情况下调用它，但指定一个接口作为道具的“形状”。没有更可怕的写！我们可以使用正确的 TypeScript 类型，并添加以将 prop 标记为不需要 ? 。Object as PropType<Something>?
const props = defineProps<{
ponyModel: PonyModel;
isRunning?: boolean;
}>();
不过我们丢失了一些信息。在以前的版本中，我们可以指定其默认值为 .为了具有相同的行为，我们可以使用帮助程序：isRunningfalsewithDefaults
interface Props {
ponyModel: PonyModel;
isRunning?: boolean;
}
const props = withDefaults(defineProps<Props>(), { isRunning: false });
要迁移的最后一个剩余语法是声明。emits
defineEmits
Vue 提供了一个帮助程序，与帮助程序非常相似。 返回函数：defineEmitsdefinePropsdefineEmitsemit
const emit = defineEmits({
selected: () => true
});
或者更好的是，使用TypeScript：
const emit = defineEmits<{
(e: 'selected'): void;
}>();
完整组件声明缩短了 10 行。对于~30行组件来说，这不是一个糟糕的减少！它更容易阅读，并且与TypeScript配合得更好。让所有内容自动暴露到模板中确实感觉有点奇怪，但是没有写回车符，但是您已经习惯了。
Pony.vue
<template>
<figure @click="clicked()">
<Image :class="lazy" data-src="ponyImageUrl" :alt="ponyModel.name" />
<figcaption>{{ ponyModel.name }}</figcaption>
</figure>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
interface Props {
ponyModel: PonyModel;
isRunning?: boolean;
}
const props = withDefaults(defineProps<Props>(), { isRunning: false });
const emit = defineEmits<{
(e: 'selected'): void;
}>();
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
</script>
默认关闭和defineExpose
声明组件的两种方法之间有一个更细微的区别：组件是“默认关闭的”。这意味着其他组件看不到组件内部定义的内容。script setup
例如，组件可以访问该组件（通过使用 refs，我们将在下一章中看到）。如果定义为 ，则函数返回的所有内容对于父组件 （） 也是可见的。如果 用 定义，则父组件不可见。 可以通过添加助手来选择暴露的内容。然后，公开的将作为 访问。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey
现在，此语法是声明组件的推荐方法，使用起来非常棒！
到此这篇关于详解如何在Vue3使用＜script lang=“ts“ setup＞语法糖的文章就介绍到这了,更多相关Vue3使用＜script lang=“ts“ setup＞内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
