快捷導(dǎo)航

詳解如何在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖

更新時(shí)間：2022年06月13日 15:15:47 作者：南北極之間

本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

遷移組件

以下組件有兩個(gè)道具（要顯示的和一個(gè)標(biāo)志）?；谶@兩個(gè)道具，計(jì)算模板中顯示的小馬圖像的URL（通過(guò)另一個(gè)組件）。該組件還會(huì)在用戶(hù)單擊它時(shí)發(fā)出一個(gè)事件。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>

隱式返回

我們還可以刪除末尾的：在模板中聲明的所有頂級(jí)綁定（以及所有導(dǎo)入）都自動(dòng)可用。所以這里和可用，無(wú)需返回它們。returnscript setupponyImageUrlclicked

聲明也是如此！導(dǎo)入組件就足夠了，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 提供了一個(gè)助手，你可以用它來(lái)定義你的道具。它是一個(gè)編譯時(shí)幫助程序（一個(gè)宏），所以你不需要在代碼中導(dǎo)入它：Vue 在編譯組件時(shí)會(huì)自動(dòng)理解它。defineProps

defineProps返回道具：

const props = defineProps({
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

defineProps將前一個(gè)聲明作為參數(shù)接收。但是我們可以為T(mén)ypeScript用戶(hù)做得更好！props

defineProps是一般類(lèi)型化的：你可以在沒(méi)有參數(shù)的情況下調(diào)用它，但指定一個(gè)接口作為道具的“形狀”。沒(méi)有更可怕的寫(xiě)！我們可以使用正確的 TypeScript 類(lèi)型，并添加以將 prop 標(biāo)記為不需要 ?? 。Object as PropType<Something>?

const props = defineProps<{
  ponyModel: PonyModel;
  isRunning?: boolean;
}>();

不過(guò)我們丟失了一些信息。在以前的版本中，我們可以指定其默認(rèn)值為 .為了具有相同的行為，我們可以使用幫助程序：isRunningfalsewithDefaults

interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });

要遷移的最后一個(gè)剩余語(yǔ)法是聲明。emits

defineEmits

Vue 提供了一個(gè)幫助程序，與幫助程序非常相似。返回函數(shù)：defineEmitsdefinePropsdefineEmitsemit

const emit = defineEmits({
  selected: () => true
});

或者更好的是，使用TypeScript：

const emit = defineEmits<{
  (e: 'selected'): void;
}>();

完整組件聲明縮短了 10 行。對(duì)于~30行組件來(lái)說(shuō)，這不是一個(gè)糟糕的減少！它更容易閱讀，并且與TypeScript配合得更好。讓所有內(nèi)容自動(dòng)暴露到模板中確實(shí)感覺(jué)有點(diǎn)奇怪，但是沒(méi)有寫(xiě)回車(chē)符，但是您已經(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>

默認(rèn)關(guān)閉和defineExpose

聲明組件的兩種方法之間有一個(gè)更細(xì)微的區(qū)別：組件是“默認(rèn)關(guān)閉的”。這意味著其他組件看不到組件內(nèi)部定義的內(nèi)容。script setup

例如，組件可以訪問(wèn)該組件（通過(guò)使用 refs，我們將在下一章中看到）。如果定義為，則函數(shù)返回的所有內(nèi)容對(duì)于父組件（）也是可見(jiàn)的。如果用定義，則父組件不可見(jiàn)。可以通過(guò)添加助手來(lái)選擇暴露的內(nèi)容。然后，公開(kāi)的將作為訪問(wèn)。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

現(xiàn)在，此語(yǔ)法是聲明組件的推薦方法，使用起來(lái)非常棒！

到此這篇關(guān)于詳解如何在Vue3使用＜script lang=“ts“ setup＞語(yǔ)法糖的文章就介紹到這了,更多相關(guān)Vue3使用＜script lang=“ts“ setup＞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: