setup 语法糖具体使⽤以及与 setup() 函数的区别

使⽤ script setup 语法糖时，内部的属性或⽅法可以直接使⽤，⽆需 return 返回；引⼊⼦组件可以⾃动注册，⽆需 components 注册

1、属性和⽅法⽆需返回，可直接使⽤

setup() 来写组合式 API 时，内部定义的属性和⽅法，必须使⽤ return 暴露到上下⽂，外部才能够使⽤，否则就会报错，写法为：

setup() 来写组合式 API 时，内部定义的属性和⽅法，必须使⽤ return 暴露到上下⽂，外部才能够使⽤，否则就会报错，写法为：

<template>

{{todoList}}

</template>

<script>

export default {

setup(){

let todoList = [{todo:"我想看海",isCheck:false},{todo:"我想浪漫",isCheck:true},]

return{

todoList,

}}}

</script>

使⽤ script setup 语法糖，不需要 return 和 setup函数，只需要全部定义到 script setup 内。

可以简化上述代码为：

<template>

{{todoList}}

</template>

<script setup>

let todoList = [

{todo:"我想看海",isCheck:false},

{todo:"我想浪漫",isCheck:true},

]

</script>

2、组件⾃动注册

在 script setup 语法糖中，引⼊的组件可以⾃动注册，不需要再通过 components 进⾏注册，⽽且⽆法指定当前组件的名字，会⾃动以⽂件名为主，省去了 name 属性。

<template>

<SetUp></SetUp>

<set-up></set-up>

</template>

<script setup>

import SetUp from "./SetUp.vue"

</script>

⽽在 setup() 写的组合式 API 中，引⼊的组件必须在 components 内注册之后才能使⽤，否则⽆法正常引⼊。

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 ⽅法来获取，可以修改上述代码为：

<template>

{{ a }} {{ b }}

</template>

<script setup>

import { toRefs } from "vue"

const props = defineProps({

a: String,

b: String

})

const { a, b } = toRefs( props )

</script>

4、获取 attrs、slots 和 emits

setup( props, context )接收两个参数，context 上下⽂环境，其中包含了属性、插槽、⾃定义事件三部分。

setup() 内获取如下：

setup(props,context){

const { attrs, slots, emit } = context

// attrs 获取组件传递过来的属性值，

// slots 组件内的插槽

// emit ⾃定义事件⼦组件

}

使⽤ script setup 语法糖时，

useAttrs ⽅法 获取 attrs 属性

useSlots ⽅法获取 slots 插槽

defineEmits ⽅法获取 emit ⾃定义事件

<script setup>

import { useAttrs, useSlots } from 'vue'

const slots = useSlots();

const attrs = useAttrs();

const emits = defineEmits(['getChild']);

</script>

5、对外暴露属性

script setup 语法糖的组件默认不会对外暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使⽤ defineExpose。⼦组件暴露属性：

<template>

{{msg}}

</template>

<script setup>

import { ref } from 'vue'

let msg = ref("Child Components");

// defineExpose⽆需导⼊，直接使⽤

defineExpose({

msg,

num

});

</script>

⽗组件引⽤⼦组件暴露的属性：

<template>

<Child ref="child" />

</template>

<script setup>

import { ref, onMounted } from 'vue'

import Child from './components/Child.vue'

let child = ref(null);

onMounted(() => {

console.log(child.value.msg); // Child Components

console.log(child.value.num); // 123

})

</script>