Vue3.0实验性语法之script setup

最新推荐文章于 2025-09-19 20:54:00 发布

原创最新推荐文章于 2025-09-19 20:54:00 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue3学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍VUE3中的script setup新特性，该特性允许开发者直接在script标签内书写setup逻辑，简化代码结构并提高开发效率。文章还探讨了如何在script setup中使用组件、定义响应式变量，并介绍了props、emit、slots和attrs等概念的使用方法。

VUE3 新特性 script setup

script setup是VUE3的实验性功能，直接把 setup 写在 script 标签中，表示标签里面的代码相当于在setup里面运行。

这样可以太太省略很多冗余代码，默认直接暴露出去。

// APP.vue
<template>
  <div>
    {{ yjj }}
  </div>
  <Home message="虚心学习" />
</template>

<script setup>
import { ref } from "vue";
 // 只需导入组件即可直接在模板中使用
import Home from "./components/home.vue";
 // 同理，定义即可使用
let yjj = ref("牛马");
</script>

**setup 的中参数迁移：props, emit, slots , attr **

// home.vue
<template>
  <div>{{ props.message }}</div>
  <slot></slot>
</template>

<script setup>
 // 获取 props,emit,slots,attrs
import { defineProps, defineEmit, useContext } from "vue";

 // 获取props
let props = defineProps({
  message: String,
});
 // emits
let emits = defineEmit(["click", "delete"]);
 // slots,attrs
let { slots, attrs } = useContext();
console.log(attrs, slots);
</script>

<style scoped></style>