1、总览

一个 Vue 单文件组件 (SFC) Single File Components，通常使用*.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.

2、相应语言块

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

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

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

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

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

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

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

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

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

自定义块

请参见相关工具链指南获取更多细节。

3、自动名称推导

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

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

4、预处理器

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

  // use TypeScript

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

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

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

  • Vite
  • Vue CLI
  • webpack + vue-loader

5、Src 导入

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

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

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

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

6、注释

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