当前位置: 首页 > 工具软件 > C Script > 使用案例 >

script setup 语法使用

宋宏儒
2023-12-01

vue3.2正式版已经发布,script setup语法已经由实验性质改为了正式语法,可以放心大胆的在项目中用了。

官方文档:https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax

相比于常规的composition api语法,script setup语法更加简练方便,不过它本身只是个语法糖,最终还是转换为composition api语法运行。官方文档纯英文且不够详细,下面分享一下个人整理的语法使用方式。

  • 看这篇文章之前需先提前熟悉vue3新语法变化
  • vue版本:v3.2.3
  • 使用ts

1、基础用法

<template>
  <Foo :count="count" @click="inc" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Foo from './Foo.vue'

const count = ref(0)
const inc = () => {
  count.value++
}
</script>
  • 不需要return任何东西,所有定义的变量和方法会自动导出,template模板可以直接使用
  • import引入的组件也会自动导出,模板里可以直接引用。
  • 引入的组件命名需要首字母大写。
  • 确切的说是:所有的变量方法和import导入都可以在模板中直接使用

2、定义props、emit

<template>
  <div @click="onClick">{{foo}}</div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
// 定义props属性
const props = defineProps({
  foo: {
    type: String,
    default: '',
  }
})
// 定义emit事件
const emit = defineEmits({
  'onSubmit': null,
})

function onClick () {
  emit('onSubmit', { val: props.foo })
}
</script>
  • 定义的props里的属性可以直接在template模板中使用。

3、自定义指令 directives

<template>
  <div v-click-outside />
</template>

<script lang="ts" setup>
import { directive as vClickOutside } from 'v-click-outside'
</script>
  • 特殊点就是命名方式,script中使用驼峰命名,template中使用短横线命名。

4、defineExpose

这个defineExpose是干什么的呢,因为script setup默认是不对外界暴露组件实例的,所以在其他组件中通过诸如$refs$parent都默认无法获取当前组件实例,但是通过defineExpose暴露的可以获取。(这个设计非常好,对于防止代码耦合很有用)

  • 子组件Child.vue
<script lang="ts" setup>
import { ref } from 'vue'

const aaa = 1
const bbb = ref(2)
const ccc = ref(3)

defineExpose({
  aaa,
  bbb
})
</script>
  • 父组件:
<template>
  <Child ref="refChild" />
  <div @click="onClick">123</div>
</template>

<script lang="ts" setup>
import Child from './Child.vue'

const refChild = ref<any>(null) // 定义同名ref,和template模板中Child的ref属性同名,即可代表Child组件实例

function onClick () {
  console.log(refChild.value) // { aaa: 1, bbb: 2 }
}
</script>
  • onClick方法中打印了Child组件实例,只会存在defineExpose暴露出的变量。

5、使用 slots 和 attrs

<script lang="ts" setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>
  • 通过useSlots和useAttrs来定义,达到类似$slots$attrs的效果。
  • 在高级组件封装中,$slots主要用于获取作用域插槽,典型应用场景:base基础组件的封装;$attrs主要用于获取父组件绑定属性,典型应用场景:第三方组件的二次封装。具体使用方式比较复杂,这里不再赘述。

6、结合普通script

有些setup()之外的配置项在script setup中不适用,可以结合普通script一起使用。

<script lang="ts">
// 普通<script>, 只会执行一次
runSideEffectOnce()

// 声明一些额外的配置选项
export default {
  name: 'CompName',
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script lang="ts" setup>
// script setup语法区域
</script>

7、顶层作用域下使用await

在script setup下的顶层作用域下可以直接使用await,

<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
</script>
  • 这个功能必须结合<suspense>使用,目前<suspense>还在试验阶段,未来应该会成为vue正式功能,官方文档:https://v3.cn.vuejs.org/guide/migration/suspense.html#%E4%BB%8B%E7%BB%8D

8、vscode插件:Volar

script setup语法推荐使用Volar扩展插件配合使用,效果和Vetur类似,但是对script setup语法的兼容性更好。

需要注意Volar和Vetur两个是互斥的,使用Volar时要记得禁用Vetur。

 类似资料: