关于vue3:vue3setup语法糖

1.setup 语法糖简介

间接在 script 标签中增加 setup 属性就能够间接应用 setup 语法糖了。
应用 setup 语法糖后， 不必写 setup 函数；组件只须要引入不须要注册；属性和办法也不须要再返回，能够间接在 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

defineProps：子组件接管父组件中传来的 props
defineEmits：子组件调用父组件中的办法
defineExpose：子组件裸露属性，能够在父组件中拿到

2.1defineProps

父组件代码

<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.2defineEmits

子组件代码

<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.3defineExpose

子组件代码

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