詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖
Vue 3.2 引入了語法，這是一種稍微不那么冗長的聲明組件的方式。您可以通過向 SFC 的元素添加屬性來啟用它，然后可以刪除組件中的一些樣板。script setupsetupscript
讓我們舉一個實際的例子，并將其遷移到這個語法！
遷移組件
以下組件有兩個道具（要顯示的和一個標志）?；谶@兩個道具，計算模板中顯示的小馬圖像的URL（通過另一個組件）。該組件還會在用戶單擊它時發(fā)出一個事件。PonyponyModelisRunningImageselected
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>
第一步，將屬性添加到元素中。然后，我們只需要保留函數(shù)的內(nèi)容：所有的樣板都可以消失。您可以刪除 和 中的函數(shù)：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>
我們差不多做到了：我們現(xiàn)在需要遷移 和 聲明。propsemits
defineProps
Vue 提供了一個助手，你可以用它來定義你的道具。它是一個編譯時幫助程序（一個宏），所以你不需要在代碼中導入它：Vue 在編譯組件時會自動理解它。defineProps
defineProps返回道具：
const props = defineProps({
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
});
defineProps將前一個聲明作為參數(shù)接收。但是我們可以為TypeScript用戶做得更好！props
defineProps是一般類型化的：你可以在沒有參數(shù)的情況下調用它，但指定一個接口作為道具的“形狀”。沒有更可怕的寫！我們可以使用正確的 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 提供了一個幫助程序，與幫助程序非常相似。 返回函數(shù)：defineEmitsdefinePropsdefineEmitsemit
const emit = defineEmits({
selected: () => true
});
或者更好的是，使用TypeScript：
const emit = defineEmits<{
(e: 'selected'): void;
}>();
完整組件聲明縮短了 10 行。對于~30行組件來說，這不是一個糟糕的減少！它更容易閱讀，并且與TypeScript配合得更好。讓所有內(nèi)容自動暴露到模板中確實感覺有點奇怪，但是沒有寫回車符，但是您已經(jīng)習慣了。
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
聲明組件的兩種方法之間有一個更細微的區(qū)別：組件是“默認關閉的”。這意味著其他組件看不到組件內(nèi)部定義的內(nèi)容。script setup
例如，組件可以訪問該組件（通過使用 refs，我們將在下一章中看到）。如果定義為 ，則函數(shù)返回的所有內(nèi)容對于父組件 （） 也是可見的。如果 用 定義，則父組件不可見。 可以通過添加助手來選擇暴露的內(nèi)容。然后，公開的將作為 訪問。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey
現(xiàn)在，此語法是聲明組件的推薦方法，使用起來非常棒！
到此這篇關于詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖的文章就介紹到這了,更多相關Vue3使用＜script lang=“ts“ setup＞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權限控制問題,下面這篇文章主要給大家介紹了關于vue使用路由守衛(wèi)實現(xiàn)菜單的權限設置的相關資料,需要的朋友可以參考下2023-06-06
ResizeObserver?loop?limit?exceeded報錯原因及解決方案
這篇文章主要給大家介紹了關于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09
VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例
這篇文章主要介紹了VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細介紹了Vue如何利用自定義指令實現(xiàn)按鈕權限控制效果，文中的示例代碼講解詳細，具有一定的學習價值，需要的可以參考下2023-05-05
在使用服務器端渲染時，除了服務端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下2018-10-10
Swiper是一個很常用的用于實現(xiàn)各種滑動效果的插件，PC端和移動端都能很好的適配。本文將利用Swiper實現(xiàn)封裝輪播圖組件，感興趣的可以了解一下2022-09-09
這篇文章主要介紹了Vue動態(tài)類的幾種使用方法總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue?Axios請求取消和重發(fā)封裝的實現(xiàn)代碼
這篇文章主要介紹了Vue?Axios請求取消和重發(fā)的封裝的實現(xiàn),文章通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-09-09
組件系統(tǒng)是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通?？蓮陀玫慕M件構建大型應用。這篇文章主要介紹了Vue中的組件及路由使用 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了使用Vue3實現(xiàn)pdf在線預覽的三種常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02