這篇“如何在Vue3中使用＜script lang=“ts“ setup＞語法糖”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何在Vue3中使用＜script lang=“ts“ setup＞語法糖”文章吧。

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、宜興ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的宜興網(wǎng)站制作公司

遷移組件

以下組件有兩個道具（要顯示的和一個標志）。通過另一個組件，計算模板中顯示的小馬圖像的URL，基于這兩個道具。該組件還會在用戶單擊它時發(fā)出一個事件。The image selected while the Ponypony Model is running.

Pony.vue

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,
      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 };
  }
});

第一步，將屬性添加到元素中。然后，我們只需要保留函數(shù)的內(nèi)容：所有的樣板都可以消失。您可以刪除 和 中的函數(shù)：setupscriptsetupdefineComponentsetupscript

Pony.vue

import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
components: { Image },
 
props: {
  ponyModel: {
    type: Object as PropType,
    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 };

隱式返回

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

這句話可以重寫為：“我們可以僅通過導(dǎo)入組件，Vue 就可以自動識別它在模板中的使用，因此可以省略聲明?！薄omponentsImagecomponents

Pony.vue

import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
props: {
  ponyModel: {
    type: Object as PropType,
    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');
}

我們差不多做到了：我們現(xiàn)在需要遷移 和 聲明。propsemits

defineProps

Vue 提供了一個助手，你可以用它來定義你的道具。這是一個編譯時助手（一個宏），因此您不必在代碼中導(dǎo)入它。Vue 在編譯組件時會自動識別它。defineProps

defineProps返回道具：

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

defineProps將前一個聲明作為參數(shù)接收。但是我們可以為TypeScript用戶做得更好！props

defineProps是一般類型化的：你可以在沒有參數(shù)的情況下調(diào)用它，但指定一個接口作為道具的“形狀”。沒有更可怕的寫！我們可以使用正確的 TypeScript 類型，并添加以將 prop 標記為不需要 ???? 。用更通順的語言改寫為："Object 作為 Props 的類型時，是否需要指定具體的類型？"

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

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

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

要遷移的最后一個剩余語法是聲明。emits

defineEmits

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

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

或者更好的是，使用TypeScript：

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

完整組件聲明縮短了 10 行。這樣減少30行組件來說還不錯！這樣做有助于提高可讀性并更好地與 TypeScript 配合。雖然感覺讓所有內(nèi)容自動暴露到模板中有點奇怪，但由于沒有換行符，您已經(jīng)習(xí)慣了。

Pony.vue

 

import { computed } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
 
interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps(), { isRunning: false });
 
const emit = defineEmits<{
  (e: 'selected'): void;
}>();
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
 
function clicked() {
  emit('selected');
}

默認關(guān)閉和defineExpose

有一些微妙的區(qū)別區(qū)分兩種聲明組件的方法：組件是“默認不啟用的”。這意味著其他組件看不到組件內(nèi)部定義的內(nèi)容。script setup

舉個例子，在下一章節(jié)中我們將看到組件能夠訪問另一個組件（通過使用 refs）。當(dāng)函數(shù)被定義為 XX 時，所有函數(shù)返回的內(nèi)容在父組件 YY 中也是可見的。如果 用 定義，則父組件不可見。 可以通過添加助手來選擇暴露的內(nèi)容。然后，公開的將作為 訪問。PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

以上就是關(guān)于“如何在Vue3中使用＜script lang=“ts“ setup＞語法糖”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。