setup语法糖
模板中用到东西无需return
1、变量、方法不需要 return 出来
属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得
<script setup>
import { ref } from 'vue';
<!-- flag变量不需要在 return出去了 -->
let flag = ref("ABCD")
<!-- 函数也可以直接引用,不用在return中返回 -->
let changeHander = ()=>{
flag.value='qwe'
}
</script>
2、组件不需要在注册
使用组件,只需要引入组件就可以直接使用,不需要再在components
中注册(组件命名采用的是大驼峰)
在 script setup 语法糖中,引入的组件可以自动注册,不需要再通过 components 进行注册,而且无法指定当前组件的名字,会自动以文件名为主,省去了 name 属性。
<template>
<SetUp></SetUp>
<set-up></set-up>
</template>
<script setup>
import SetUp from "./SetUp.vue"
</script>
3、组件数据传递
父组件给子组件传值时,需要 props 接收。setup( props, context )接收两个参数,props 接收传递的数据,使用 setup() 接收数据如下
<template>
{{ a }} {{ b }}
</template>
<script>
import { toRefs } from "vue"
export default {
setup(props,context){
const { a,b } = toRefs(props)
return {
a,
b
}
}
}
</script>
而 script setup 语法糖接收 props 中的数据时,使用 defineProps 方法来获取,可以修改上述代码为:
defineProps 组件传参
父组件传参:
<template>
<div class="home">
<test-com :info="msg" time="42分钟"></test-com>
</div>
</template>
<script setup>
import TestCom from "../components/TestCom.vue"
let msg='消息'
</script>
子组件接收参数:
<script setup>
import {defineProps} from 'vue'
defineProps({
info:{
type:String,
default:'----'
},
time:{
type:String,
default:'0分钟'
},
})
</script>
defineEmits 组件抛出事件
父组件:
<template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
</div>
</template>
<script setup>
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess)=>{
console.log('新增==>',mess);
}
let myDelHander=(mess)=>{
console.log('删除==>', mess);
}
</script>
子组件接收:
<template>
<div>
<h2> 你好 </h2>
<button @click="hander1Click">新增</button>
<button @click="hander2Click">删除</button>
</div>
</template>
<script setup>
import {defineEmits} from 'vue'
// 使用defineEmits创建名称,接收一个数组
let $myemit=defineEmits(['myAdd','myDel'])
let hander1Click = ()=>{
$myemit('myAdd','新增的数据')
}
let hander2Click = ()=>{
$myemit('myDel','删除的数据')
}
</script>
defineExpose获取子组件中的属性值
子组件:
<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
like:'喜欢李',
age:27
})
// 将组件中的属性暴露出去,这样父组件可以获取
defineExpose({
sex,
info
})
</script>
父组件:
<template>
<div class="home">
<test-com ref="testcomRef"></test-com>
<button @click="getSonHander">获取子组件中的数据</button>
</div>
</template>
<script setup>
import TestCom from "../components/TestCom.vue"
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
console.log('获取子组件中的性别', testcomRef.value.sex );
console.log('获取子组件中的其他信息', testcomRef.value.info );
}
</script>
3、await的支持
setup 语法糖中可直接使用 await,不需要写 async , setup 会自动变成 async setup
代码如下(示例):
<script setup>
import Api from '../api/Api'
const data = await Api.getData()
console.log(data)
</script>