Vue 3 的 `<script setup>`：疑惑与解答

在 Vue 3 中，<script setup> 语法提供了一种新的方式来编写组件，它将 <script> 和 <template> 逻辑合并在一个文件中。这不仅简化了组件结构，还提高了代码的可读性和可维护性。

然而，在使用 <script setup> 时，可能会遇到一些问题和疑惑。本文将深入探讨使用 <script setup> 时遇到的常见疑惑，并提供明确的解答。

父组件调用子组件属性或方法报错

在 <script setup> 语法中，父组件调用子组件属性或方法时，可能会遇到错误。这是因为 <script setup> 中定义的属性和方法在模板中默认是不可见的。

要解决此问题，需要使用 expose 选项显式地将属性或方法暴露给模板。以下是如何实现：

<script setup>
const count = ref(0);

// 使用 expose 选项暴露 count 属性
expose({ count });
</script>

通过使用 expose，父组件现在可以访问子组件中的 count 属性。

旧语法与新语法的差异

与旧语法相比，<script setup> 语法具有以下主要差异：

• 没有 data() 函数： 在 <script setup> 中，组件数据不再使用 data() 函数定义。相反，它们被直接声明在 <script setup> 块中。
• 自动模板绑定： <script setup> 自动将组件数据和方法绑定到模板，无需使用 this 。
• setup 函数： <script setup> 使用 setup 函数初始化组件的响应式状态，它类似于 data() 函数，但具有更丰富的功能。

疑难解答

问： 为什么在 <script setup> 中使用 $emit 时会报错？
答： 在 <script setup> 中，需要显式地导入 $emit 函数。可以通过以下方式实现：

import { ref, onMounted, onBeforeUnmount, $emit } from 'vue';

问： 如何使用 <script setup> 中的组件的生命周期钩子？
答： 生命周期钩子可以作为 setup 函数的一部分定义：

<script setup>
const onMounted = () => {
  // 生命周期钩子代码
};
</script>

结论

<script setup> 是 Vue 3 中一种强大的语法，可以简化组件开发。但是，在使用它时需要注意一些潜在的疑惑和错误。通过理解本文中讨论的关键概念和解决方案，开发者可以充分利用 <script setup> 的优势，创建更简洁、更可维护的 Vue 组件。