如何高效运用Vue3 setup语法糖进行组件开发？

本文共计945个文字，预计阅读时间需要4分钟。

目录

1.setup语法简介

2.setup语法中新增的API

2.1 defineProps 2.2 defineEmits 2.3 defineExpose 补充：与普通script一起使用总结

1.setup语法简介

直接在script标签中添加setup属性即可使用setup特性。

目录

• 1.setup语法糖简介
• 2.setup语法糖中新增的api
• 2.1defineProps
• 2.2defineEmits
• 2.3defineExpose
• 补充：与普通的script一起使用
• 总结

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>

总结

到此这篇关于vue3:setup语法糖使用的文章就介绍到这了,更多相关vue3:setup语法糖内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！