vue3自定义组件使用

Vue 3 的自定义组件使用很简单。下面是一个简单的示例：

首先，在你的 Vue 项目中创建一个自定义组件的文件，例如 `MyComponent.vue`。

然后，在该文件中，你需要定义一个 Vue 组件。可以使用 `<template>` 标签来定义组件的 HTML 模板，使用 `<script>` 标签来定义组件的 JavaScript 代码，以及使用 `<style>` 标签来定义组件的 CSS 样式。

例如，`MyComponent.vue` 文件内容如下所示：

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

<script>
export default {
  props: {
    title: String,
    content: String,
  },
}
</script>

<style scoped>
h2 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>

接下来，在你要使用该自定义组件的地方，例如 `App.vue` 文件中，你需要在模板中引入该组件。使用 `<my-component>` 标签来引用该组件，并传递相应的属性值。

例如，`App.vue` 文件内容如下所示：

<template>
  <div>
    <my-component title="Hello" content="Welcome to my custom component!"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

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

<style>
/* 可以在这里定义 App.vue 的样式 */
</style>

现在，你就可以在你的 Vue 应用中使用自定义组件了。当你运行应用时，`MyComponent` 组件将会在页面上渲染出来，并显示相应的属性值。

希望以上内容对你有所帮助！如果你有任何其他问题，请随时提问。