• 簡介
• 1. 屬性和方法無需返回，直接使用
• 2. 元件自動註冊
• 3. 元件資料傳遞(props和emits)
• 4. 獲取 slots 和 attrs
• 5. 對外暴露屬性(defineExpose)

簡介

<script setup> 語法糖並不是新增的功能模組，它只是簡化了以往的組合API（compositionApi）的必須返回（return）的寫法，並且有更好的執行時效能。

在 setup 函式中：所有 ES 模組匯出都被認為是暴露給上下文的值，幷包含在 setup() 返回物件中。相對於之前的寫法，使用後，語法也變得更簡單。

你不必擔心setup語法糖的學習成本，他是組合式API的簡化，並沒有新增的知識點。你只需要瞭解一些用法和細微的不同之處，甚至比之前寫setup()

使用方式極其簡單，僅需要在 script 標籤加上 setup 關鍵字即可。示例：

<script setup>

</script>

注：因為setup語法糖是vue3.2正式確定下來的議案，所以vue3.2的版本是真正適合setup語法糖的版本。

1. 屬性和方法無需返回，直接使用

以前使用響應式資料是：

<template>
	{{msg}}
</template>

<script>
import { ref } from 'vue'
export default {
	setup () {
		const msg = ref('hello vue3');
		return {
			msg
		}
	}
}
</script>
 

現在使用 setup 語法糖，不需要return返回 和 setup函式，只需要全部定義在<script setup>內即可：

<template>
	{{msg}}
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3');
</script>

reactive, computed, 也一樣可以使用：

<template>
	<div>{{msg}}</div>
	<div>{{obj.a}}</div>
	<div>{{sum}}</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

const msg = ref('hello vue3');

const obj = reactive({
	a: 1,
	b: 2
})

const sum = computed(() => {
	return obj.a + 3;
});
</script>
 

2. 元件自動註冊

在 script setup 中，引入的元件可以直接使用，無需再通過components進行註冊，並且無法指定當前元件的名字，它會自動以檔名為主，也就是不用再寫name屬性了。示例：

<template>
	<Child />
</template>

<script setup>
import Child from '@/components/Child.vue'
</script>

3. 元件資料傳遞(props和emits)

props 和 emits 在語法糖中使用 defineEmits 和 defineProps 方法來使用：

子元件 Child.vue：

<template>
	<div @click="toEmits">Child Components</div>
</template>

<script setup>
// defineEmits,defineProps無需匯入，直接使用
const emits = defineEmits(['getChild']);
const props = defineProps({
	title: {
		type: String,
		defaule: 'defaule title'
	}
});

const toEmits = () => {
	emits('getChild', 'child value') // 向父元件傳遞資料
}

// 獲取父元件傳遞過來的資料
console.log(props.title); // parent value
</script>

父元件 Home.vue：

<template>
	<Child @getChild="getChild" :title="msg" />
</template>

<script setup>
import { ref } from 'vue'
import Child from '@/components/Child.vue'
const msg = ref('parent value')
const getChild = (e) => {
	// 接收父元件傳遞過來的資料
	console.log(e); // child value
}
</script>

4. 獲取 slots 和 attrs

可以通過useContext從上下文中獲取 slots 和 attrs。不過提案在正式通過後，廢除了這個語法，被拆分成了useAttrs和useSlots。示例：

// 舊
<script setup>
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

// 新
<script setup>
  import { useAttrs, useSlots } from 'vue'
  
  const slots = useSlots();
  const attrs = useAttrs();
  console.log(attrs.dataId); // 檢視父元件傳來的自定義屬性
</script>

5. 對外暴露屬性(defineExpose)

<script setup> 的元件預設不會對外部暴露任何內部宣告的屬性。
如果有部分屬性要暴露出去，可以使用 defineExpose

子元件 Child.vue：

<template>
	{{msg}}
</template>

<script setup>
import { ref } from 'vue'

let msg = ref("Child Components");
let num = ref(123);

// defineExpose無需匯入，直接使用
defineExpose({
	msg,
	num
});
</script>

父元件 Home.vue：

<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>