怎麼在Vue3中使用＜script lang=「ts「 setup＞語法糖

遷移元件

以下元件有兩個道具（要顯示的和一個標誌）。透過另一個組件，計算模板中顯示的小馬圖像的URL，基於這兩個道具。該元件也會在使用者點擊它時發出事件。 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 &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
    function clicked() {
      emit(&#39;selected&#39;);
    }
 
    return { ponyImageUrl, clicked };
  }
});
</script>

第一步，將屬性加入元素中。然後，我們只需要保留函數的內容：所有的樣板都可以消失。您可以刪除和中的函數：setupscriptsetupdefineComponentsetupscript

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
 
return { ponyImageUrl, clicked };
</script>

隱含傳回

刪除末尾的頂級綁定聲明和導入語句會自動讓它們在模板中使用可用。所以這裡和可用，無需返回它們。 When the pony image is clicked, the script will return.

這句話可以重寫為：“我們可以僅通過導入組件，Vue 就可以自動識別它在模板中的使用，因此可以省略聲明。」。 componentsImagecomponents

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
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 ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
</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 作為 Props 的型別時，是否需要指定特定的型別？"

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

不過我們遺失了一些資訊。在先前的版本中，我們可以指定其預設值為 .為了具有相同的行為，我們可以使用幫助程式：isRunningfalsewithDefaults

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

要遷移的最後一個剩餘語法是聲明。 emits

defineEmits

Vue 提供了一個幫助程序，與幫助程序非常相似。這句話已經很清楚地表達了一個函數和其對應的操作，因此很難用單獨一個句子來重寫。但如果必須重寫，可以嘗試以下幾種方式： 1. 這些函數用於定義和觸發事件。 2. defineEmits, defineProps 和 defineEmitsemit 函數都與事件有關。 3. 如果你需要定義、設定和觸發事件，可以使用 defineEmits、defineProps 和 defineEmitsemit 函數。 4. 這幾個函數可以幫助你在 Vue.js 中管理事件

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

或更好的是，使用TypeScript：

const emit = defineEmits<{
  (e: &#39;selected&#39;): void;
}>();

完整元件宣告縮短了 10 行。這樣減少30行組件來說還不錯！這樣做有助於提高可讀性並更好地與 TypeScript 配合。雖然感覺讓所有內容自動暴露到模板中有點奇怪，但由於沒有換行符，您已經習慣了。

Pony.vue

預設關閉和defineExpose

有一些微妙的區別區分兩種宣告元件的方法：元件是「預設不啟用的」。這意味著其他組件看不到組件內部定義的內容。 script setup

舉個例子，在下一章中我們將看到元件能夠存取另一個元件（透過使用 refs）。當函數被定義為 XX 時，所有函數傳回的內容在父元件 YY 中也是可見的。如果 用 定義，則父元件不可見。可以透過新增助手來選擇暴露的內容。然後，公開的將作為 訪問。 PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

以上是怎麼在Vue3中使用＜script lang=「ts「 setup＞語法糖的詳細內容。更多資訊請關注PHP中文網其他相關文章！