Vue语法糖＜script setup＞详解，用最快的方式让你看懂和＜script＞的区别

我就是我 2024-03-24 17:51 30阅读 0赞

## 前言 ##

Vue3出来已经3年了，但是前两天在百度上搜索有关setup语法糖的细节时，发现很多博客关于语法糖细节部分，还是讲的很粗糙，因此决定自己来写一篇入门的博客，方便大家快速上手。

## <script setup>简介 ##

它是Vue3中的一个语法糖，熟悉vue3脚手架的同学，应该一眼就能看出来，vite脚手架默认创建的模板项目中就使用了这个语法糖，说明官网也推荐我们去使用语法糖。

我们都知道，setup是vue3中新增的属性，主要用来解决数据和方法的声明。  
<script setup>是setup的替代，我们之前在setup中声明的内容，现在都可以直接迁移。

## 作用 ##

一言以蔽之，就是简化我们的书写，使用了这个语法糖之后，我们在<script>中声明的任何数据、方法以及import内容都不必再次配置，可以直接在模板<template>中使用。

## 配置 ##

### 基础数据 ###

setup语法糖有一个特点，相对于需要return来配置返回内容的setup属性，setup语法糖中可以不用返回。  
例如，我简单配置了一个a变量和一个计数方法。

<span>{
       { a }}</span><br/>
      <span>{
       { person }}</span><br/>
      <el-button  type="primary" :plain="false" @click="count()">计数</el-button>

页面的效果如图所示：  
![在这里插入图片描述][22869d5f995b4a4f9edf696505f2b1e9.png_pic_center]  
ps:这里的element-ui不知道为什么失效了，不影响我们理解。

### 子组件 ###

要配置子组件，我们只需要import引入即可，我们也可以对子组件取别名，这个不多赘述。

import School from './components/School.vue'
     import School as mySchool from './components/School.vue'

### props和emits的配置 ###

> 关于emits属性，简单的说明一下，在vue3中需要在子组件中对绑定的自定义事件作出声明，否则会给出警告，emits属性即用来配置事件名。

配置props，需要用到一个方法defineProps（）。同理emits也有对应的方法defineEmits().

### slot插槽和Attrs ###

这两个学过vue2的话，应该不陌生，slot插槽的作用是在子组件标签中插入dom元素，并且子组件能够配置slot来接受这些元素。Atrr则是接受props未收集的数据，在vue2中，获取的方式为 组件对象.$atrri 。

常用的配置就介绍完啦，如果想要更深入的了解setup语法糖，可以自行前往官网查看。

[22869d5f995b4a4f9edf696505f2b1e9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8d0ef6ecd281428aaae20a765f4bc4d0.png

Vue语法糖＜script setup＞详解，用最快的方式让你看懂和＜script＞的区别

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 setup语法糖

相关 Vue语法糖＜script setup＞详解，用最快的方式让你看懂和＜script＞的区别

相关 Vue3实战06-CompositionAPI+＜script setup＞好在哪？

相关介绍一下 Vue Conf 21 大会上：尤大提到 script setup 语法！

相关 vue script setup语法糖

相关 vue3 中 script setup

相关 Vite script setup语法糖的使用

相关 Vue3新的script setup语法糖，拿来吧你！

相关 Vue 3 script-setup 语法糖应用指南，前端进阶必备

相关基于Vue3 script-setup 语法糖的俄罗斯方块项目实践