vue3:setup语法糖

1、setup语法糖简介

直接在script标签中添加setup属性就可以直接使用setup语法糖了。
使用setup语法糖后：

1. 不用写setup函数
2. 组件只需要引入不需要注册
3. 属性和方法也不需要再返回，可以直接在template模板中使用。

<template>
    <my-component @click="func" :numb="numb"></my-component>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import myComponent from '@/component/myComponent.vue';
    //此时注册的变量或方法可以直接在template中使用而不需要导出
    const numb = ref(0);
    let func = ()=>{
      numb.value++;
    }
  </script>

2、setup语法糖中新增的api

1. defineProps：子组件接收父组件中传来的props
2. defineEmits：子组件调用父组件中的方法
3. defineExpose：子组件暴露属性，可以在父组件中拿到

2.1 defineProps

父组件代码

<template>
    <my-component @click="func" :numb="numb"></my-component>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import myComponent from '@/components/myComponent.vue';
    const numb = ref(0);
    let func = ()=>{
      numb.value++;
    }
  </script>

子组件代码

<template>
    <div>{{numb}}</div>
  </template>
  <script lang="ts" setup>
    import {defineProps} from 'vue';
    defineProps({
      numb:{
        type:Number,
        default:NaN
      }
    })
  </script>

2.2 defineEmits调用父组件的方法

子组件代码

<template>
    <div>{{numb}}</div>
    <button @click="onClickButton">数值加1</button>
  </template>
  <script lang="ts" setup>
    import {defineProps,defineEmits} from 'vue';
    defineProps({
      numb:{
        type:Number,
        default:NaN
      }
    })
    const emit = defineEmits(['addNumb']);
    const onClickButton = ()=>{
      //emit(父组件中的自定义方法,参数一,参数二,...)
      emit("addNumb");
    }
  </script>

父组件代码

<template>
    <my-component @addNumb="func" :numb="numb"></my-component>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import myComponent from '@/components/myComponent.vue';
    const numb = ref(0);
    let func = ()=>{
      numb.value++;
    }
  </script>

2.3 defineExpose调用父组件的方法

子组件代码

<template>
    <div>子组件中的值{{numb}}</div>
    <button @click="onClickButton">数值加1</button>
  </template>
  <script lang="ts" setup>
    import {ref,defineExpose} from 'vue';
    let numb = ref(0);
    function onClickButton(){
      numb.value++; 
    }
    //暴露出子组件中的属性
    defineExpose({
      numb 
    })
  </script>

父组件代码

<template>
    <my-comp ref="myComponent"></my-comp>
    <button @click="onClickButton">获取子组件中暴露的值</button>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import myComp from '@/components/myComponent.vue';
    //注册ref，获取组件
    const myComponent = ref();
    function onClickButton(){
      //在组件的value属性中获取暴露的值
      console.log(myComponent.value.numb)  //0
    }
    //注意：在生命周期中使用或事件中使用都可以获取到值，
    //但在setup中立即使用为undefined
    console.log(myComponent.value.numb)  //undefined
    const init = ()=>{
      console.log(myComponent.value.numb)  //undefined
    }
    init()
    onMounted(()=>{
      console.log(myComponent.value.numb)  //0
    })
  </script>