>[success] # setup 當使用`<script setup>`的時候，任何在`<script setup>`聲明的頂層的綁定 (包括變量，函數聲明，以及 import 導入的內容) 都能在模板中直接使用,直接導入的函數都不用在`methods`暴露案例中`capitalize `可以直接導入酒使用： ~~~ <script setup> import { capitalize } from './helpers' // 變量 const msg = 'Hello!' // 函數 function log() { console.log(msg) } </script> <template> <button @click="log">{{ msg }}</button> <div>{{ capitalize('hello') }}</div> </template> ~~~ * 動態組件 由于組件是通過變量引用而不是基于字符串組件名注冊的，在 `<script setup> `中要使用動態組件的時候，應該使用動態的 :is 來綁定 ~~~ <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' ~~~ * 命名空間組件 可以使用帶`.`的組件標簽，例如`<Foo.Bar>`來引用嵌套在對象屬性中的組件。這在需要從單個文件中導入多個組件的時候非常有用 ~~~ <script setup> import * as Form from './form-components' </script> <template> <Form.Input> <Form.Label>label</Form.Label> </Form.Input> </template> ~~~ >[danger] ##### 頂層 await https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await >[success] # 使用3.2 語法開啟的配置 * 你在項目使用了 Eslint，并且使用了一些`編譯器宏` (關于編譯器宏下面章節有詳細講解),這可能會導致 eslint 報`no-undef`的錯誤，如果你遇到這個問題，你需要在 ESLint 配置文件中啟用編譯器宏環境,這要求你的`eslint-plugin-vue` 在8.0 以上版本 ~~~ // .eslintrc.js module.exports = { env: { "vue/setup-compiler-macros": true, }, }; ~~~ * 如果你的版本在8.0以下，打開`.eslintrc.js`文件并修改如下 ~~~ // The Follow configs works with eslint-plugin-vue v7.x.x globals: { defineProps: "readonly", defineEmits: "readonly", defineExpose: "readonly", withDefaults: "readonly", }, ~~~ >[success] # 官網# script setup [# script setup](https://cn.vuejs.org/api/sfc-script-setup.html)