script setup 语法使用
vue3.2正式版已经发布,script setup语法已经由实验性质改为了正式语法,可以放心大胆的在项目中用了。官方文档:https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax相比于常规的composition api语法,script setup语法更加简练方便,官方文档纯英文且不够详细,下面分享一下个人整理的语法使用方式。
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。
更多推荐
所有评论(0)