<script setup> 如何封装成组件供别的页面引用

如果你正在使用 Vue 3，你可以使用 `<script setup>` 区块来封装组件并将其导出。以下是一个示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script setup>
  // props
  const props = defineProps({
    title: String,
    content: String
  })

  // 导出组件
  export default {
    props
  }
</script>

在上面的例子中，我们定义了两个属性 `title` 和 `content`，并使用 `defineProps` 函数将其定义为一个 `props` 对象。然后，我们使用 `export default` 语句将组件导出。

在另一个页面中，你可以通过以下方式引用该组件：

<template>
  <div>
    <my-component title="Hello" content="World"></my-component>
  </div>
</template>

<script>
  import MyComponent from '@/components/MyComponent.vue'

  export default {
    components: {
      MyComponent
    }
  }
</script>

在上面的例子中，我们通过 `import` 语句导入组件，然后将其在 `components` 对象中注册，并在模板中使用。