script setup

child::

Vue 单文件组件中的增强组合式api

梗概:

主要使用标签<script setup></script>来将代码包裹其中

机制:

1. 触发时机和setup()选项一样, 即组件创建时运行里面的代码
2. 其中<script setup>的变量，函数声明，以及 import 引入的内容, 都会直接暴露给Vue 组件模板当中
   1. 当然变量需要手动使用响应式api来转换为响应式的变量
   2. 但不会暴露给组件实例
      1. [use::defineExpose]

1. 可以访问到的组件中属性:

• child::attrs
  • 通过useAttrs()方法
• child::slots
  • 通过useSlots()方法

语法:

1. 声明子组件

child::单文件组件组合式API 声明子组件

2. 声明形参与事件

child::Vue 单文件组件组合式api 声明形参与自定义事件

4. 组件周期钩子:

child::^805698

5. 声明自定义命令:

child::Vue 单文件组合式api 声明自定义命令

6. 传递信息给子组件:

6.1. provide与inject方法:

child::Vue provide和inject方法 暴露内容给后代组件

6.2. 暴露变量给子组件:

child::Vue 单文件组合式api 暴露变量给子组件

7. 递归组件

• 自己导入自己
  • 导入之后给个别名, 避免混淆
• 然后在模板中自己调用自己

访问内置API

child::script setup中访问内置API

指向原始笔记的链接