這篇“如何在Vue3中使用<script lang=“ts“ setup>語法糖”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“如何在Vue3中使用<script lang=“ts“ setup>語法糖”文章吧。
以下組件有兩個(gè)道具(要顯示的和一個(gè)標(biāo)志)。通過另一個(gè)組件,計(jì)算模板中顯示的小馬圖像的URL,基于這兩個(gè)道具。該組件還會(huì)在用戶單擊它時(shí)發(fā)出一個(gè)事件。The image selected while the Ponypony Model is running.
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>
刪除末尾的頂級(jí)綁定聲明和導(dǎo)入語句會(huì)自動(dòng)讓它們在模板中變得使用可用。所以這里和可用,無需返回它們。When the pony image is clicked, the script will return.
這句話可以重寫為:“我們可以僅通過導(dǎo)入組件,Vue 就可以自動(dòng)識(shí)別它在模板中的使用,因此可以省略聲明?!?。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
Vue 提供了一個(gè)助手,你可以用它來定義你的道具。這是一個(gè)編譯時(shí)助手(一個(gè)宏),因此您不必在代碼中導(dǎo)入它。Vue 在編譯組件時(shí)會(huì)自動(dòng)識(shí)別它。defineProps
defineProps返回道具:
const props = defineProps({ ponyModel: { type: Object as PropType<PonyModel>, required: true }, isRunning: { type: Boolean, default: false } });
defineProps將前一個(gè)聲明作為參數(shù)接收。但是我們可以為TypeScript用戶做得更好!props
defineProps是一般類型化的:你可以在沒有參數(shù)的情況下調(diào)用它,但指定一個(gè)接口作為道具的“形狀”。沒有更可怕的寫!我們可以使用正確的 TypeScript 類型,并添加以將 prop 標(biāo)記為不需要 ???? 。用更通順的語言改寫為:"Object 作為 Props 的類型時(shí),是否需要指定具體的類型?"
const props = defineProps<{ ponyModel: PonyModel; isRunning?: boolean; }>();
不過我們丟失了一些信息。在以前的版本中,我們可以指定其默認(rèn)值為 .為了具有相同的行為,我們可以使用幫助程序:isRunningfalsewithDefaults
interface Props { ponyModel: PonyModel; isRunning?: boolean; } const props = withDefaults(defineProps<Props>(), { isRunning: false });
要遷移的最后一個(gè)剩余語法是聲明。emits
Vue 提供了一個(gè)幫助程序,與幫助程序非常相似。這句話已經(jīng)很清晰地表達(dá)了一個(gè)函數(shù)和其相應(yīng)的操作,因此很難用單獨(dú)一個(gè)句子來重寫。但如果必須要重寫,可以嘗試以下幾種方式: 1. 這些函數(shù)用于定義和觸發(fā)事件。 2. defineEmits, defineProps 和 defineEmitsemit 函數(shù)都與事件有關(guān)。 3. 如果你需要定義、設(shè)置和觸發(fā)事件,可以使用 defineEmits、defineProps 和 defineEmitsemit 函數(shù)。 4. 這幾個(gè)函數(shù)可以幫助你在 Vue.js 中管理事件
const emit = defineEmits({ selected: () => true });
或者更好的是,使用TypeScript:
const emit = defineEmits<{ (e: 'selected'): void; }>();
完整組件聲明縮短了 10 行。這樣減少30行組件來說還不錯(cuò)!這樣做有助于提高可讀性并更好地與 TypeScript 配合。雖然感覺讓所有內(nèi)容自動(dòng)暴露到模板中有點(diǎn)奇怪,但由于沒有換行符,您已經(jīng)習(xí)慣了。
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>
有一些微妙的區(qū)別區(qū)分兩種聲明組件的方法:組件是“默認(rèn)不啟用的”。這意味著其他組件看不到組件內(nèi)部定義的內(nèi)容。script setup
舉個(gè)例子,在下一章節(jié)中我們將看到組件能夠訪問另一個(gè)組件(通過使用 refs)。當(dāng)函數(shù)被定義為 XX 時(shí),所有函數(shù)返回的內(nèi)容在父組件 YY 中也是可見的。如果 用 定義,則父組件不可見。 可以通過添加助手來選擇暴露的內(nèi)容。然后,公開的將作為 訪問。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey
以上就是關(guān)于“如何在Vue3中使用<script lang=“ts“ setup>語法糖”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。