语法糖<script setup>里面使用组件

在Vue 3中，你可以使用<script setup>语法糖来更简洁地使用组件。
<script setup>语法糖可以让你在一个单独的<script>标签中同时完成setup函数的定义和模板的引用，使代码更加简洁。
以下是一个示例，展示了如何在<script setup>中使用组件：
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
<p>{{ state.message }}</p>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 使用 ref 定义响应式数据
const count = ref(0);

// 使用 reactive 定义响应式对象
const state = reactive({
message: 'Hello, Vue 3!'
});

// 定义方法
const increment = () => {
count.value++;
};
</script>

在上面的示例中，我们直接将import语句和变量的定义放在<script setup>标签中。这样做可以让我们更简洁地定义组件的逻辑部分。
需要注意的是，在<script setup>中声明的变量和函数都会自动注入到模板中，因此无需再返回一个对象。
使用<script setup>语法糖可以减少冗余的代码，并且更方便地组织组件的逻辑。它是Vue 3中非常实用的特性之一。