vue使用setup封装接口，如何传递数据

`<script setup>`是从Vue 3.0.0开始引入的语法糖，它可以更简洁地编写单文件组件（SFC）中的脚本部分。使用`<script setup>`可以使代码更少，更易于阅读和维护。

下面是一个示例，展示了如何使用`<script setup>`：

<template>
  <div>{{ greeting }}</div>
</template>

<script setup>
const message = 'Hello, world!';
const greeting = `${message} from Vue!`;
</script>

在上面的示例中，通过`<script setup>`定义了两个常量：`message`和`greeting`。 `greeting`使用了ES6模板字符串来将`message`和其他文本拼接在一起。由于使用了`<script setup>`，因此不需要在导出对象中声明和导出这些变量，它们会自动地成为组件实例上的属性。

更复杂的组件也可以使用`<script setup>`。例如，可以在`<script setup>`中定义响应式状态、计算属性和方法。以下是一个更完整的示例，展示了如何在`<script setup>`中定义一个带有响应式状态、计算属性和方法的组件：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

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

const message = ref('Hello, world!');

const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('');
});

function reverseMessage() {
  message.value = message.value.split('').reverse().join('');
}
</script>

在上面的示例中，通过`import`语句引入了Vue 3.0中提供的`ref`和`computed`函数。`ref`用于创建响应式状态，`computed`用于创建计算属性。在`<script setup>`中定义了一个名为`message`的响应式状态，同时定义了一个名为`reversedMessage`的计算属性，它会根据`message`的值计算出相反的字符串。还定义了一个名为`reverseMessage`的方法，当用户点击按钮时会调用这个方法来反转`message`的值。

总之，`<script setup>`是Vue 3.0中非常有用的一个新特性，使得编写组件更加清晰、简洁。