vue3.2 —— setup script

发表于 更新于
本文字数： 1.8k 阅读时长 ≈ 2 分钟

Script setup 语法糖下 组件 的使用

  1. 自动的组件名推断
    Vue 默认把 文件名 直接当成组件名，无需显式声明组件名。

  2. 普通组件的使用
    组件不需要注册，引入直接使用。
    原理：setup script 在编译的时候把 template 的内容变成 vNode 后继而由 setup 函数中返回。

  1. 动态组件
    同 Vue2

  2. 递归组件
    名为 Foo.vue 的组件可以在其模板中用 <Foo/> 引用它自己

  3. 命名空间组件
    Components/index.ts 用于导出组件
    index.vue 基于命名组件使用组件

1
2
3
4
5
6
7
<script setup lang='ts'>
import * as Form from '../Components'
</script>
<template>
  <Form.Foo>
  <Form.Bar>
</template>

Script setup 语法糖下 props 的使用

  1. props 的使用 ———— defineProps

  • 运行时声明和类型声明
    运行时声明会在运行后给出提示，是 Vue 提供给我们的。
    缺点：无法对数组中的对象进行校验。

    1
    2
    3
    4
    defineProps:{
      height:Number,
      title:String,
    }

    类型声明基于 ts 类型检查，可在编译时类型检查

    1
    2
    3
    4
    5
    defineProps<{
      height:number
      title?:string
      list:{id:number,content:string}[]
    }>()

  1. Compiler Macros（编译时宏命令）
    <setup script> 在运行前会经过一个编译的过程，这个语法糖提供了一系列宏命令供开发者使用，在编译阶段会进行替换。

  2. props 的默认值 ———— withDefaults
    类型声明可以用 ? 来确定 props 是否 require，但是没有决定默认值的语法。

  • 基本用法
    1
    2
    3
    4
    5
    6
    const props = withDefaults(definedProps<{
      title?:string,
      list:{id:number,content:string}
    }>(),{
      title:'类型声明的默认值'
    })

Script setup 语法糖下 emit 的使用

  1. 自定义事件的使用 defineEmits
    普通写法和类型声明式
    普通写法对传参没有类型提示

    1
    const emits = defineEmits(['parentClick','parentChange'])

    类型声明基于 ts 类型检查，可在编译时类型检查

    1
    2
    3
    4
    const emits = defineEmits<{
      (e:'parentClick',data:number)=>void,
      (e:'parentChange')=>void
    }>()

  2. 显示暴露 ———— defineExpose
    在 setup script 中，默认情况下无法通过 ref 来获取子组件的属性和方法，需要通过 defineExpose 宏命令显式暴露出子组件的属性和方法。
    单独暴露

    1
    2
    3
    4
    defineExpose({
      count,
      handle
    })

    全部暴露(普通 <script> 下书写)

    1
    2
    3
    export default {

    }

Script setup 和 普通 script 一起使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// 普通 script 在模块范围下执行（只执行一次）
runSideEffectOnce()

// 声明额外的选项（会被迫暴露组件，打破 script setup 的默认关闭）
export default {
  name:'Bar' // 显式声明组件名
  inheritAttrs:false
  customOptions:{}
}
</script>

<script setup>
// 在 setup() 作用域中执行（对每个实例皆是如此）
</script>