vue引入组件

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>这是一个引入的组件</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
/* 组件样式 */
</style>

<!-- App.vue -->
<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>
// 引入组件
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    // 注册组件
    MyComponent
  }
}
</script>

<style>
/* 样式 */
</style>

解释说明：

1. 创建组件：

   • MyComponent.vue 是一个单独的 Vue 组件文件，包含模板、脚本和样式部分。

2. 引入组件：

   • 在 App.vue 文件中，使用 import 语句引入 MyComponent.vue 文件。

3. 注册组件：

   • 在 App.vue 的 components 选项中注册 MyComponent，这样可以在模板中使用 <my-component> 标签来引用该组件。

4. 使用组件：

   • 在 App.vue 的模板中通过 <my-component></my-component> 来使用已经注册的组件。