vue3中单文件组件

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的

import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过 methods 选项来暴露它：

三、响应式

响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：

四、使用组件

动态组件

由于组件被引用为变量而不是作为字符串键来注册的，在

递归组件

一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用引用它自己。
请注意这种方式相比于 import 导入的组件优先级更低。如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：

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

命名空间组件

可以使用带点的组件标记，例如来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

五、使用自定义指令

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。
但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用

六、defineProps 和 defineEmits

在

defineProps 和 defineEmits 都是只在
- 当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
八、useSlots 和 useAttrs
- 在
  - useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用。
  九、顶层 await
  - 另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式
  - 注意，async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性
  附：
  
  你可能感兴趣的:(vue3中单文件组件