setup syntactic sugar

1. How to use the initial setup

<script>
import {
    
    ref} from "vue"
import HelloWorld from "./HelloWorld.vue"
export default{
    
    
  name:"app",
  components:{
    
    
  HelloWorld
   },
  props:["name"]
  setup(props,ctx){
    
    
    const state=ref("");
    state.value=props.name;
    const add=()=>{
    
    
       //分发自定义事件的函数,
      ctx.emit("add",50)
    }
    return {
    
    state,add}
   }
}
</script>

2.setup syntactic sugar

What is setup syntactic sugar?
Added setup in the script tag, components only need to be introduced without registration, properties and methods do not need to be returned, and there is no need to write setup functions or export default

<template>
   <div>{
    
    {
    
    data}}</div>
   <div>{
    
    {
    
    state.name}}</div>
</template>
//当前组件名称会自动以文件名为主，不用再需要name属性了
<script setup>
//组件自动注册，
import HelloWorld from "./HelloWorld.vue"
import {
    
    ref,reactive} from "vue"
const data=ref("");
const state=reactive({
    
    name:"张三"})
</script>

Question: How to get props, emit, and attrs without a setup function?
The setup syntactic sugar provides three new APIs for us to use:defineProps、defineEmits和useContext

• defineProps is used to receive the value passed from the parent component props.

//子组件接收
<script setup>
 import {
    
    defineProps} from 'vue'
 const props=defineProps(["name"])
</script>

//父组件传值
<template>
  <div>我是父组件</div>
  <div ：name="state.name"></div>
</template>
<script setup>
import {
    
    ref,reactive} from "vue"
const data=ref("");
const state=reactive({
    
    name:"张三"})
</script>

• defineEmits is used to declare the triggered event table.

//子组件
 <script setup>
import {
    
    defineEmits,ref} from 'vue'
const name=ref("张三")
 //自定义函数，父组件可以触发
 const emit=defineEmits(['update'])
 const show=()=>{
    
    
   emit("update",name.value)
 }
</script>

<template>
  <div>我是父组件</div>
  <div  @update="update"></div>
</template>
<script setup>
import {
    
    ref,reactive} from "vue"
const update=(data)=>{
    
    
console.log(data)//张三
}
</script>

• Get slots and attrs

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

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

• defineExpose exposes properties externally

<script setup>By default, the component does not expose any internally declared properties to the outside world. If some properties need to be exposed, you can use defineExpose

scenes to be used:通过ref获取子组件的内容，子组件没有向外暴露是获取不到的

//子组件
<script setup>
import {
    
    ref} from 'vue'
const name=ref("张三")
const age=ref(12)
defineExpose({
    
    
 name
})
</script>

//父组件
 <template>
   <div>我是父组件</div>
   <HelloWorld ref="hello"></HelloWorld>
</template>
<script setup>
import HelloWorld from "./HelloWorld.vue"
import {
    
    ref,reactive} from "vue"
const hello=ref(null)
OnMounted(()=>{
    
    
  console.log(hello.name)//张三
  console.log(hello.age)//获取不到值
})
</script>

Note: defineProps, defineEmits, defineExpose APIs do not need to be imported and can be used directly

Summarize:

<script setup>Advantages of syntactic sugar

• Less boilerplate content, more concise code.
• Ability to declare props and throw events using pure Typescript.
• Better runtime performance (its template will be compiled into a render function in the same scope as it, without any intermediate proxy).
• Better IDE type inference performance (less work for the language server to extract types from the code).