【Vue3.0】關於 script setup 語法糖的用法

派大星⊙∫⊙發表於2023-01-12
Vue

script setup - 簡介

先來看一看官閘道器於 <script setup> 的介紹:

官網介紹

要徹底的瞭解 setup 語法糖，你必須先明確 setup() 這個 組合式API

官網中對於這一api的介紹是—— 在 setup() 函式中返回的物件會暴露給模板和元件例項。其它的選項也可以透過元件例項來獲取 setup() 暴露的屬性

1.沒有在 <script> 標籤後新增 setup 時，你在宣告/初始化 響應式 變數或者函式時，每一個都需要在 setup() 的return中進行返回，像這樣：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值會暴露給模板和其他的選項式 API 鉤子
    return {
      count
    }
  }
}
</script>

當你選擇<script setup>語法糖時，即可免去這一噁心的操作

like this：

<template>
    <!--  元件自動註冊  -->
    <Child />
    <!-- 變數自動註冊  -->
    {{count}}
</template>

<script setup>
  // 註冊的元件、變數、函式、方法示例直接暴露給模板
  import Child from './Child.vue'
  // 直接定義 count 無需返回
  const count = ref(0)
</script>

2.元件核心 API 直接可以使用
類似 props 、 emits 、 slots 和 attrs 等

props : 透過defineProps指定當前 props 型別，獲得上下文的props物件，一般用來定義元件的屬性

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>

父子元件傳值的時候用到的 emits

使用defineEmit定義當前元件含有的事件，並透過返回的上下文去執行 emit

<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change', 'delete'])
</script>

小結
在以往的寫法中，包括在vue2.0，定義資料和方法，都需要在結尾 return 出去，在能在dom模板中使用。而vue3.0新增的<script setup> 寫法中，定義的屬性和方法直接暴露給模板和示例元件而省去返回的環節，可以直接使用。

-- 希望本文可以幫助到你 2023年1月12日 --

相關文章