vue3 setup语法糖如何使用

这篇文章主要介绍了vue3 setup语法糖如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3 setup语法糖如何使用文章都会有所收获，下面我们一起来看看吧。

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>

补充：与普通的script一起使用

<script setup>可以和普通的<script>一起使用。普通的<script>在有这些需要的情况下或许会被使用到。

• 无法在<script setup>声明的选项，例如inheritAttrs或通过插件启用的自定义的选

• 声明命名导出

• 运行副作用或者创建只需要执行一次的对象

<script>
    // 普通 <script>, 在模块范围下执行(只执行一次)
    runSideEffectOnce()
    
    // 声明额外的选项
    export default {
      inheritAttrs: false,
      customOptions: {}
    }
</script>

<script setup>
    // 在 setup() 作用域中执行 (对每个实例皆如此)
</script>