Vue3中script setup怎么用？看这篇就够啦！

script setup是什么呀？

嘿,script setup是Vue3里一种超方便的编写组件逻辑的方式哦，它让我们写Vue组件的时候更加简洁明了呢，以前在Vue2或者普通的Vue3组件写法里，我们可能要在script标签里写好多东西，比如导出组件、定义data、methods等等，但有了script setup呀，就像是给我们开了一条“快捷通道”，能让我们更专注地把组件相关的逻辑都紧凑地放在一起处理啦。

怎么开始用script setup呢？

首先呢,在你的.vue文件里，把原本的script标签改成这样：

<script setup>
// 这里面就可以写组件相关的逻辑啦
</script>

就这么简单的一步,就开启了script setup模式咯，然后呢，你就可以在这个标签里面大展身手啦。

在script setup里怎么定义变量呀？

在script setup里面定义变量可方便啦，就像平常写JavaScript那样直接定义就行啦，比如说：

<script setup>
let count = 0;
const message = 'Hello Vue3 with script setup!';
</script>

这里我们就定义了一个普通的变量count和一个常量message哦,而且这些变量呀，在模板里都可以直接用呢，不需要像以前那样还要通过this或者什么特别的方式去获取啦，直接用就行，是不是超赞的呀？

那怎么定义函数呢？

定义函数也和平时写JavaScript没啥两样哦,看下面这个例子：

<script setup>
function increment() {
  count++;
}
</script>

这里我们定义了一个函数increment,它的作用就是把前面定义的count变量的值加1呢，而且在模板里呀，也能很轻松地绑定这个函数来触发相应的操作哦，比如可以绑定到一个按钮的点击事件上呢。

组件之间怎么通信呀？在script setup里有啥特别的？

在script setup里进行组件通信也有它方便的地方呢。

如果是父子组件通信,父组件给子组件传值的话，还是和普通Vue3组件那样，在父组件里通过给子组件标签添加属性来传值，比如说父组件里有这样一个子组件标签：

<ChildComponent :propName="valueFromParent" />

这里的propName就是要传给子组件的属性名,valueFromParent就是父组件里的值啦。

那子组件在script setup里怎么接收呢？就直接用啦，像这样：

<script setup>
const props = defineProps({
  propName: {
    type: String,
    required: true
  }
});
</script>

这里我们通过defineProps这个函数来定义接收的属性哦,然后就可以在子组件里使用props.propName来获取父组件传过来的值啦。

要是子组件要给父组件传值呢,在子组件里可以通过emit来触发一个自定义事件，在script setup里这样写：

<script setup>
import { defineEmits } from 'vue';
const emits = defineEmits(['customEvent']);
function sendValueToParent() {
  emits('customEvent', valueToSend);
}
</script>

这里我们先通过defineEmits定义了一个要触发的自定义事件名customEvent,然后在函数sendValueToParent里通过emits函数来触发这个事件，并且可以带上要传给父组件的值valueToSend哦，父组件就可以在对应的地方监听这个自定义事件来获取子组件传过来的值啦。

怎么引入和使用外部组件呀？

引入外部组件在script setup里也挺简单的，比如说我们要引入一个叫做AnotherComponent的外部组件，首先要在script setup上面引入它哦，就像这样：

<script setup>
import AnotherComponent from './AnotherComponent.vue';
</script>

这里我们从相对路径下引入了AnotherComponent.vue这个组件，然后在模板里就可以直接用啦，

<template>
  <AnotherComponent />
</template>

就这么轻松地把外部组件给用上啦,是不是感觉很便捷呀？

script setup有啥优势呢？

script setup的优势可不少哦。

首先就是代码更简洁啦,不用像以前那样写好多导出啦、定义啦之类的冗余代码，能让我们一眼就看清组件的核心逻辑。

其次呢,它和模板的结合更紧密了，变量呀、函数呀在模板里都能直接无障碍地使用，开发起来就更流畅啦。

还有哦,在进行组件相关的一些操作，比如定义props、emits等等，都有专门的函数来处理，让整个组件的结构和逻辑更加清晰规范呢。

呀,script setup是Vue3里一个很棒的特性，能让我们在开发Vue组件的时候更加高效、轻松，大家不妨多多尝试一下哦。

希望这篇关于Vue3 script setup使用的问答文章能让你对它有更清楚的了解呀，快快动手用起来吧！