您现在的位置是：网站首页> 编程资料编程资料
vue3中单文件组件<script setup>实例详解_vue.js_
2023-05-24
122人已围观
简介 vue3中单文件组件<script setup>实例详解_vue.js_
里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 {{ msg }}
import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过 methods 选项来暴露它：
{{ capitalize('hello') }}
三、响应式
响应式状态需要明确使用响应式 APIs 来创建。和从 setup() 函数中返回值一样，ref 值在模板中使用的时候会自动解包：
四、使用组件
动态组件
由于组件被引用为变量而不是作为字符串键来注册的，在
递归组件
- 一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用
引用它自己。 - 请注意这种方式相比于 import 导入的组件优先级更低。如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：
import { FooBar as FooBarChild } from './components' 命名空间组件
- 可以使用带点的组件标记，例如
来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：
label
五、使用自定义指令
- 全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。
- 但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用
This is a Heading
六、defineProps 和 defineEmits
在
- defineProps 和 defineEmits 都是只在
- 当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
八、useSlots 和 useAttrs