如何在 Vue 3 中使用<script lang=“ts“ setup>语法糖
推荐阅读:
Vue 3.2 引入了语法,这是一种稍微不那么冗长的声明组件的方式。您可以通过向 SFC 的元素添加属性来启用它,然后可以删除组件中的一些样板。script setup
setup
script
让我们举一个实际的例子,并将其迁移到这个语法!
迁移组件
以下组件有两个道具(要显示的和一个标志)。基于这两个道具,计算模板中显示的小马图像的URL(通过另一个组件)。该组件还会在用户单击它时发出一个事件。Pony
ponyModel
isRunning
Image
selected
Pony.vue
<template>
<figure @click="clicked()">
<Image :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>
第一步,将属性添加到元素中。然后,我们只需要保留函数的内容:所有的样板都可以消失。您可以删除 和 中的函数:setup
script
setup
defineComponent
setup
script
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>
隐式返回
我们还可以删除末尾的:在模板中声明的所有顶级绑定(以及所有导入)都自动可用。所以这里和可用,无需返回它们。return
script setup
ponyImageUrl
clicked
声明也是如此!导入组件就足够了,Vue 知道它在模板中使用:我们可以删除声明。components
Image
components
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>
我们差不多做到了:我们现在需要迁移 和 声明。props
emits
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;
}>();
不过我们丢失了一些信息。在以前的版本中,我们可以指定其默认值为 .为了具有相同的行为,我们可以使用帮助程序:isRunning
false
withDefaults
interface Props {
ponyModel: PonyModel;
isRunning?: boolean;
}
const props = withDefaults(defineProps<Props>(), { isRunning: false });
要迁移的最后一个剩余语法是声明。emits
defineEmits
Vue 提供了一个帮助程序,与帮助程序非常相似。 返回函数:defineEmits
defineProps
defineEmits
emit
const emit = defineEmits({
selected: () => true
});
或者更好的是,使用TypeScript:
const emit = defineEmits<{
(e: 'selected'): void;
}>();
完整组件声明缩短了 10 行。对于~30行组件来说,这不是一个糟糕的减少!它更容易阅读,并且与TypeScript配合得更好。让所有内容自动暴露到模板中确实感觉有点奇怪,但是没有写回车符,但是您已经习惯了。
Pony.vue
<template>
<figure @click="clicked()">
<Image :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,我们将在下一章中看到)。如果定义为 ,则函数返回的所有内容对于父组件 () 也是可见的。如果 用 定义,则父组件不可见。 可以通过添加助手来选择暴露的内容。然后,公开的将作为 访问。Pony
Image
Image
defineComponent
setup
Pony
Image
script setup
Image
defineExpose({ key: value })
value
key
现在,此语法是声明组件的推荐方法,使用起来非常棒!
相关文章
- 如何使用vue-cli搭建好的项目
- 如何用vue打造一个移动端音乐播放器
- Vue-Router中History模式【华为云分享】
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue.config.js常用配置详解
- Vue Element使用icon图标(第三方)
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3: 调节图片的亮度/对比度/饱和度并保存(vue@3.2.37)
- 如何给一个vue项目重命名(vue.js 3.2.4)
- [FAQ] Vue 如何控制标签元素的某个属性的显示 ?
- 在Chrome console里修改Vue界面元素,更新如何刷新回UI?
- uniapp、vue多规格选择效果demo(整理)
- Vue 3 Composition API,你真的需要吗?
- 怎样使用vue cli脚手架工具快速搭建vuejs项目和配置文件的具体步骤
- 如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题
- 如何在VUE单页面引入CSS、JS(CDN链接)
- Vue:从单页面到工程化项目
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- vue中如何引入全局样式或方法
- 手把手教你如何构建Vue前端组件库
- 230:vue+openlayers使用WebGLPoints显示数据,根据某属性值的不同阈值显示不同颜色点
- 【vue】如何安装vue 脚手架以及创建脚手架项目_10
- vue利用计算属性做(展开收起)(整理)
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- SSR是什么?Vue中怎么实现?