index.vue 中引入另一个 Vue 组件 - daniel-qa/Vue GitHub Wiki
假设有两个文件：
index.vue：主组件
MyComponent.vue：要引入的组件
- MyComponent.vue 示例
<template>
<div>
<h2>这是 MyComponent 组件</h2>
<p>一些内容...</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script>
<style scoped>
/* 组件样式 */
</style>
- index.vue 示例
<template>
<div>
<h1>这是主组件</h1>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from './MyComponent.vue'; // 引入组件
</script>
<style scoped>
/* 主组件样式 */
</style>
-
步骤说明：
1 . 创建组件：首先创建一个新的 Vue 文件（如 MyComponent.vue），并编写该组件的模板、脚本和样式。
2 . 引入组件：在 index.vue 中，使用 import MyComponent from './MyComponent.vue'; 引入组件。
3 . 使用 <script setup>：在 index.vue 中使用 <script setup> 标签，这样可以简化组件的书写方式，自动处理导入的组件。
4 . 使用组件：在 index.vue 的模板中使用 < MyComponent /> 来渲染该组件。
-
注意事项：
使用 Vue 3 的组合式 API 时，< script setup> 可以使组件代码更简洁。