vue3 引入组件

// 在 Vue 3 中引入组件的示例代码

// 1. 创建一个简单的 Vue 组件
// MyComponent.vue
<template>
  <div>
    <h1>这是一个引入的组件</h1>
  </div>
</template>

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

// 2. 在主应用中引入并使用该组件
// main.js 或 setup 文件
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue' // 引入组件

const app = createApp(App)

// 注册组件，可以在全局或局部注册
app.component('MyComponent', MyComponent) // 全局注册
// 或者在某个组件内局部注册：
// components: { MyComponent }

app.mount('#app')

// 3. 在模板中使用组件
// App.vue
<template>
  <div id="app">
    <MyComponent /> <!-- 使用已注册的组件 -->
  </div>
</template>

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

解释说明：

1. 创建组件：首先创建一个名为 MyComponent 的 Vue 组件，保存为 MyComponent.vue 文件。
2. 引入组件：在主应用文件（如 main.js）中，通过 import 语句引入这个组件。
3. 注册组件：可以将组件注册为全局组件，也可以在某个特定组件内部局部注册。这里展示了全局注册的方式。
4. 使用组件：在模板中通过 <MyComponent /> 标签来使用这个组件。

这样，你就可以在 Vue 3 项目中成功引入和使用自定义组件了。