虽然Composition API用起来已经非常方便了,但是我们还是有很烦的地方,比如
组件引入了还要注册
属性和方法都要在setup函数中返回,有的时候仅一个return就十几行甚至几十行
不想写啊怎么办
好办,Vue3官方提供了script setup语法糖
只需要在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,setup函数也不需要,甚至export default都不用写了,不仅是数据,计算属性和方法,甚至是自定义指令也可以在我们的template中自动获得。
但是这么过瘾的语法糖,还是稍微添加了一点点心智负担,因为没有了setup函数,那么props,emit,attrs怎么获取呢,就要介绍一下新的语法了。
setup script语法糖提供了三个新的
API来供我们使用:defineProps
、defineEmits
和`useContext
defineProps 用来接收父组件传来的值props。
defineEmits 用来声明触发的事件表。
useContext 用来获取组件上下文context。
父组件
<template>
?<div>
? ?<h2>我是父组件!</h2>
? ?<Child msg="hello"
? @child-click="handleClick" />
?</div>
</template>
?
<script setup>
import Child from './components/Child.vue'
?
const handleClick = (ctx) => {
?console.log(ctx)
}
</script>
子组件
<template>
?<span @click="sonClick">msg: {{ props.msg }}</span>
</template>
?
<script setup>
import { useContext, defineProps, defineEmits } from 'vue'
// defineProps 用来接收父组件传来的值props。
// defineEmits 用来声明触发的事件表。
// useContext 用来获取组件上下文context。
?
const emit = defineEmits(['child-click'])
const ctx = useContext()
const props = defineProps({ ?// 可以拿到它的值
?msg: String,
})
?
const sonClick = () => {
?emit('child-click', ctx)
}
</script>
子组件先不使用语法糖
<template>
<div>
我是子组件{{msg}}
</div>
</template>
<script >
import { ref } from 'vue'
export default {
setup() {
const msg = ref('hello')
return {
msg,
}
},
}
现在把子组件换成script setup语法糖再来试一试
<template>
<div>
我是子组件{{msg}}
</div>
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello')
</script>
不必再配合 async 就可以直接使用 await 了,这种情况下,组件的 setup 会自动变成 async setup
<script setup>
const post = await fetch('/api').then(() => {})
</script>
css 变量注入
<template>
<span>Jerry</span>
</template>
<script setup>
import { reactive } from 'vue'
const state = reactive({
color: 'red'
})
</script>
<style scoped>
span {
// 使用v-bind绑定state中的变量
color: v-bind('state.color');
}
</style>
nextTick
<script setup>
import { nextTick } from 'vue'
nextTick(() => {
// ...
})
</script>
路由导航守卫
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 添加一个导航守卫,在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
next()
})
// 添加一个导航守卫,在当前组件更新时触发。
// 在当前路由改变,但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
next()
})
</script>