vue3更新的setup語法糖怎么用

本文小編為大家詳細介紹“vue3更新的setup語法糖怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue3更新的setup語法糖怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

語法糖用法：

// 將 `setup` attribute 添加到 `<script>` 代碼塊上
// 里面的代碼會被編譯成組件 `setup()` 函數的內容
// 就是這么簡單明了
<script setup>

</script>

語法糖帶來的體驗

一、組件自動注冊

// 無需使用components，引入即注冊，起飛有沒有
<script setup>
    import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

二、屬性及方法無需return

// 當使用 `<script setup>` 的時候，任何在 `<script setup>` 聲明的頂層的綁定
// (包括變量，函數聲明，以及 import 引入的內容) 都能在模板中直接使用

import { ref } from 'vue'
<script setup>
// 變量
let msg = ref('Hello!')

// 函數
function log() {
  msg.value = "World!";
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

三、自動將文件名定義為組件的name屬性

語法糖提供的API

在 <script setup> 中必須使用 defineProps 和 defineEmits API 來聲明 props 和 emits

1、defineProps

<script setup>
const props = defineProps({
  foo: String
})
</script>

2、defineEmits

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

3、defineExpose

如果在父組件中通過ref='xxx&rsquo;的方法來獲取子組件實例， 而且子組件使用了<script setup>, 則子組件的數據需要用defineExpose 的方式導出，否則不會暴露其屬性

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
  a,
  b
})
</script>

<script setup>可以與普通的 <script> 一起使用

<script>
// 普通 <script>, 在模塊范圍下執行(只執行一次)
// 聲明額外的選項、例如自定義組件名
export default {
  name: '組件1'
}
</script>

<script setup>
// code
</script>

讀到這里，這篇“vue3更新的setup語法糖怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。