--

teleport可以指定元素渲染到某一元素下；

如：

<teleport to="body">
  <div>父級teleport</div>
</teleport>

emits自定義事件

emits: ['inFocus', 'submit'] // 會覆蓋原生事件
emits: {
    // 沒有驗證
    click: null,

    // 驗證 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        
 
return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  }

v-module可以繫結多個值

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

自定義v-model修飾符：

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
 
</div>
app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      
 
this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})

<script setup>語法糖

宣告的方法、變數、元件 可以直接在模板中使用；不用顯示return出來

動態元件：

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

遞迴元件、元件別名

例如：名為FooBar.vue的元件可以在其模板中用<FooBar/>引用它自己。

為了避免元件名和變數衝突，可以使用元件別名

import { FooBar as FooBarChild } from './components'

名稱空間元件（引入多個元件時非常方便）：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

使用自定義指令：

這裡有一個需要注意的限制：必須以vNameOfDirective的形式來命名本地自定義指令，以使得它們可以直接在模板中使用。

<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // 在元素上做些操作
  }
}
</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

<script setup>
  // 匯入的指令同樣能夠工作，並且能夠通過重新命名來使其符合命名規範
  import { myDirective as vMyDirective } from './MyDirective.js'
</script>

defineProps和defineEmits

在<script setup>中必須使用defineProps和defineEmitsAPI 來宣告props和emits，它們具備完整的型別推斷並且在<script setup>中是直接可用的：

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

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

defineExpose

使用<script setup>的元件是預設關閉的，也即通過模板 ref 或者$parent鏈獲取到的元件的公開例項，不會暴露任何在<script setup>中宣告的繫結。

為了在<script setup>元件中明確要暴露出去的屬性，使用defineExpose編譯器巨集：

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

useSlots和useAttrs

在<script setup>使用slots和attrs的情況應該是很罕見的，因為可以在模板中通過$slots和$attrs來訪問它們。在你的確需要使用它們的罕見場景中，可以分別用useSlots和useAttrs兩個輔助函式：

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

useSlots和useAttrs是真實的執行時函式，它會返回與setupContext.slots和setupContext.attrs等價的值，同樣也能在普通的組合式 API 中使用

與普通的<script>一起使用

...

頂層await

<script setup>中可以使用頂層await。結果程式碼會被編譯成async setup()：

<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>

--