<script setup> ->单文件组件中使用组合API编译时的语法糖。优势:
-
减少版样内容,代码简洁
-
使用纯typescript声明props和emits
-
优异的运行性能
-
优异的IDE类型推断性能
1.基础用法
<script setup lang="ts">
</script>
2.<script setup>声明的变量、函数以及import引入的组件和内容在模板中直接使用
以前:
// html
<p>{{ massage }}</p>
<News />
// script
<script>
import { ref } from 'vue'
import News from '@/components/News.vue'
export default {
components:{
News
},
setup() {
const massage = ref('这是一个组件')
return{
massage
}
}
}
</script>
现在:
// html
<p>{{ massage }}</p>
<News />
// script
<script setup>
import { ref } from 'vue'
import News from '@/components/News.vue'
const massage = ref('这是一个组件')
</script>
3.组件数据传递: defineProps 和 defineEmites
// 父组件
// html
<News @getNews="getNews" :title="message" />
// script
<script setup>
import from '@/components/News.vue'
import {ref} from 'vue'
const message = ref('这是一个父组件')
const getNews = (e) => {
console.log(e) // 我是来自子组
}
</script>
// 子组件
// html
<div @click="handleClick">{{ props.title }}</div>
// js
<script setup>
const emits = defineEmits(['getNews'])
const props = defineProps({
title: String
})
const handleClick = () => {
emits('getNews', '我是来自子组件')
}
</script>
4.获取 useAttrs 和 useSlots
<script setup>
import {useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
console.log(attrs.NewsId) // 父组件传来的自定义属性
</script>
5.对外暴漏属性 - defineExpose
-
暴露属性给外部使用
// 父组件 // html <News ref="data"/> // js <script setup> import { ref, onMounted } from 'vue' import News from '@/components/News.vue' let data = ref(null) onMounted(() => { console.log(data.value.message) // 我来自子组件 console.log(data.value.sex) // 0 }) </script>
// 子组件 <script setup> import {ref} from 'vue' const message= ref('我来自子组件') const sex = ref(0) defineExpose({ message, sex }) </script>
6. async setup
const post = await $http.post('/api/xxx')
7.css变量注入
<script setup>
import { ref} from 'vue'
const color= ref('red')
</script>
<style scoped>
span {
// 使用v-bind绑定变量
color: v-bind('color')
}
</style>
8. nextTick
<script setup>
import { nextTick } from 'vue'
nextTick(() => {
// ...
})
</script>
9.路由导航守卫
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 添加一个导航守卫,在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
next()
})
// 添加一个导航守卫,在当前组件更新时触发。
// 在当前路由改变,但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
next()
})
</script>