>[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)