SFC 语法定义 ​

总览 ​

一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

每一个 *.vue 文件都由三种顶层语言块构成：、 和 ，以及一些其他的自定义块：

 {{ msg }}export default { data() { return { msg: 'Hello world!' } }}.example { color: red;} This could be e.g. documentation for the component.

相应语言块 ​

` {#template}"">​

• 每个 *.vue 文件最多可以包含一个顶层 块。

• 语块包裹的内容将会被提取、传递给 @vue/compiler-dom，预编译为 JavaScript 渲染函数，并附在导出的组件上作为其 render 选项。

` {#script}"">​

• 每个 *.vue 文件最多可以包含一个 块。(使用 的情况除外)

• 这个脚本代码块将作为 ES 模块执行。

• 默认导出应该是 Vue 的组件选项对象，可以是一个对象字面量或是 defineComponent 函数的返回值。

` {#script-setup}"">​

• 每个 *.vue 文件最多可以包含一个 。(不包括一般的 )

• 这个脚本块将被预处理为组件的 setup() 函数，这意味着它将为每一个组件实例都执行。 中的顶层绑定都将自动暴露给模板。要了解更多细节，请看 的专门文档。

` {#style}"">​

• 每个 *.vue 文件可以包含多个 标签。

• 一个 标签可以使用 scoped 或 module attribute (查看 SFC 样式功能了解更多细节) 来帮助封装当前组件的样式。使用了不同封装模式的多个 标签可以被混合入同一个组件。

自定义块 ​

在一个 *.vue 文件中可以为任何项目特定需求使用额外的自定义块。举例来说，一个用作写文档的 块。这里是一些自定义块的真实用例：

• Gridsome：
• vite-plugin-vue-gql：
• vue-i18n：

自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块，请参见 SFC 自定义块集成工具链指南获取更多细节。

自动名称推导 ​

SFC 在以下场景中会根据文件名自动推导其组件名：

• 开发警告信息中需要格式化组件名时；
• DevTools 中观察组件时；
• 递归组件自引用时。例如一个名为 FooBar.vue 的组件可以在模板中通过 引用自己。(同名情况下) 这比明确注册/导入的组件优先级低。

预处理器 ​

代码块可以使用 lang 这个 attribute 来声明预处理器语言，最常见的用例就是在 中使用 TypeScript：

 // use TypeScript

lang 在任意块上都能使用，比如我们可以在 标签中使用 Sass 或是 中使用 Pug：

p {{ msg }} $primary-color: #333; body { color: $primary-color; }

注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：

• Vite
• Vue CLI
• webpack + vue-loader

src 导入 ​

如果你更喜欢将 *.vue 组件分散到多个文件中，可以为一个语块使用 src 这个 attribute 来导入一个外部文件：

请注意 src 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：

• 相对路径需要以 ./ 开头
• 你也可以从 npm 依赖中导入资源

src 导入对自定义语块也同样适用：

注释 ​

在每一个语块中你都可以按照相应语言 (HTML、CSS、JavaScript 和 Pug 等等) 的语法书写注释。对于顶层注释，请使用 HTML 的注释语法

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!