07.Vue3的必背技能点（六）：＜script setup＞语法糖、defineProps、defineEmits、defineExpose；

前端小砖er

已于 2024-02-28 11:57:03 修改

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE3从0到1渐近式学习文章标签：前端 vue javascript

于 2024-01-31 17:33:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44121341/article/details/135958762

VUE3从0到1渐近式学习专栏收录该内容

17 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue3中的<script setup>语法糖，包括其基本定义和相较于普通<script>的优势，如简化代码和增强Typescript支持。接着，讨论了defineProps和defineEmits的使用，它们分别用于声明props和自定义事件，并通过withDefaults宏辅助设置默认值。最后，解释了defineExpose的作用，即如何将子组件的属性和方法暴露以实现父子组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、<script setup>语法糖；

1.基本定义；

单文件组件（SFC）中使用组合式API使用的语法糖；
import导入、响应式数据、变量、函数声明在模板中可以直接使用；

2.相比普通的 <script> 优势；

更少的样板内容，更简洁的代码；
能够使用纯 Typescript 声明 props 和自定义事件；

<script setup>

// 引入组合式api
import { ref } from 'vue';

// 引入组件
import childComponent from './components/child.vue';

// 定义ref数据
let personName = ref('bob');

// 定义函数
function getName() {
  console.log('hello world!')
}
</script>
 
<template>
  <div id="app">

    <p>{
  
  { personName }}</p>

    <button @click="getName">点击事件</button>

了解本专栏

超级会员免费看