vue3 setup 語法糖

Vue3官方提供了 script setup 語法糖

只需在script標簽中添加setup，組件只需引入不用注冊，屬性和方法也不用返回，也不用寫setup函數，也不用寫export default ，甚至是自定義指令也可以在我們的template中自動獲得。

<template>
  <my-component :num="num" @click="addNum" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MyComponent from './MyComponent .vue';

  // 像在平常的setup中一樣的寫,但是不需要返回任何變量
  const num= ref(0)       //在此處定義的 num 可以直接使用
  const addNum= () => {   //函數也可以直接引用,不用在return中返回
    num.value++
  }
</script>

//必須使用駝峰命名

因為沒有了setup函數，那么props，emit，attrs怎么獲取呢

setup script語法糖提供了新的API來供我們使用

defineProps 用來接收父組件傳來的 props ; defineEmits 用來聲明觸發的事件。

//父組件

<template>
  <my-son foo="🚀🚀🚀🚀🚀🚀" @change="childClick" />
</template>

<script lang="ts" setup>
import MySon from "./MySon.vue";

let childClick = (e: any):void => {
  console.log(e);  //🚀🚀🚀🚀🚀🚀
};
</script>


//子組件

<template>
  <span @click="sonClick">信息:{{ props.foo }}</span>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps} from "vue";

const emit = defineEmits(["change"]);     // 聲明觸發事件 change
const props = defineProps({ foo: String });   // 獲取props
console.log(props)

const sonClick = () =>{
    emit('change' , props.foo)
}
</script>

useSlots 和 useAttrs在

<script setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

defineExpose
如果在父組件中通過ref='xxx’的方法來獲取子組件實例，
子組件使用了script setup語法糖,
則子組件的數據需要用defineExpose 的方式導出，否則不會暴露屬性。

//父組件

<template>
  <Daughter ref="daughter" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Daughter from "./Daughter.vue";

const daughter = ref(null)
console.log('🚀🚀🚀🚀~daughter',daughter)
</script>


//子組件

<template>
  <div>妾身{{ msg }}</div>
</template>

<script lang="ts" setup>
import { ref ,defineExpose} from "vue";
const msg = ref('貂蟬')
defineExpose({
    msg
})
</script>