açúcar sintático de configuração

1. Como usar a configuração inicial

<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.açúcar sintático de configuração

O que é açúcar sintático de configuração?
Depois de adicionar a configuração na tag script, os componentes precisam apenas ser introduzidos sem registro, propriedades e métodos não precisam ser retornados e não há necessidade de escrever funções de configuração ou exportar padrão

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

Pergunta: Como obter props, emit e attrs sem uma função de configuração?
O açúcar sintático de configuração fornece três novas APIs para usarmos:defineProps、defineEmits和useContext

• defineProps é usado para receber o valor passado do componente pai 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 é usado para declarar a tabela de eventos acionados.

//子组件
 <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>

• Obtenha slots e atributos

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

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

• defineExpose expõe propriedades externamente

<script setup>Por padrão, o componente não expõe nenhuma propriedade declarada internamente para o mundo externo. Se algumas propriedades precisam ser expostas, você pode usar defineExpose

Cenas a serem usadas:通过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>

Observação: as APIs defineProps, defineEmits e defineExpose não precisam ser importadas e podem ser usadas diretamente

Resumir:

<script setup>Vantagens do açúcar sintático

• Menos conteúdo clichê, código mais conciso.
• Capacidade de declarar props e lançar eventos usando Typescript puro.
• Melhor desempenho em tempo de execução (seu modelo será compilado em uma função de renderização no mesmo escopo que ele, sem nenhum proxy intermediário).
• Melhor desempenho de inferência de tipo IDE (menos trabalho para o servidor de linguagem extrair tipos do código).