目錄
遷移元件
隱含傳回
defineProps
defineEmits
預設關閉和defineExpose
首頁 web前端 Vue.js 怎麼在Vue3中使用<script lang=「ts「 setup>語法糖

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

May 16, 2023 pm 04:39 PM
vue3 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
Vue3如何實作刷新頁面局部內容 Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新,我們只需要實現局部元件(dom)的重新渲染。在Vue中,想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染,也可以新建一個空白元件,需要刷新局部頁面時跳轉至這個空白元件頁面,然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示,如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載,並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

vue3專案中怎麼使用tinymce vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一個功能齊全的富文本編輯器插件,但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利,tinymce本身並不適配Vue,還需要引入@tinymce/tinymce-vue,並且它是國外的富文本插件,沒有透過中文版本,需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾,將下載的

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發,就會出現require引入圖片報錯,requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入,是因為typescript不支援require所以用import導入,下面介紹如何解決:使用awaitimport

Vue3怎麼解析markdown並實現程式碼高亮顯示 Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端,需要實作markdown的解析,如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked,程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下:一、安裝依賴庫在vue專案下開啟命令窗口,並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

Vue3中怎麼實現選取頭像並裁剪 Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的,如果時Vue2或想使用其他的方式引用,請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單,只需要引入對應的元件和它的樣式文件,我這裡沒有在全域引用,只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

Vue3復用元件怎麼使用 Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react,當我們遇到多處重複程式碼的時候,我們都會想著如何重複使用這些程式碼,而不是一個檔案裡充斥著一堆冗餘程式碼。實際上,vue和react都可以透過抽組件的方式來達到復用,但如果遇到一些很小的程式碼片段,你又不想抽到另外一個檔案的情況下,相比而言,react可以在相同文件裡面宣告對應的小元件,或透過renderfunction來實現,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

怎麼使用vue3+ts+axios+pinia實現無感刷新 怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3專案打包發佈到伺服器後存取頁面顯示空白1、處理vue.config.js檔案中的publicPath處理如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

See all articles