Vue 单文件组件（Day21）单文件组件 main.js：入口文件 app.vue：统领全局组件 index.html

单文件组件

main.js：入口文件

// 入口文件
import app from "./app.vue";
new Vue({
  el: "#root",
  components: {
    app,
  },
});

app.vue：统领全局组件

<script>
// 引入组件
import { defineComponent } from 'vue'
import school from './school.vue'
import student from './student.vue'
export default defineComponent({
    name: "app",
    components:{
        school,
        student
    }
})
</script>
<template>
    <div>
       <school></school> 
       <student></student>
    </div>
</template>
<style scoped></style>

index.html：页面入口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name='viewport' content='width=device-width,initial-scale=1.0'/>
    <title>Document</title>
  </head>
  <body>
    <div id="root">
        <app></app>
    </div>
    <script src="../vue.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

组件文档（xxx.vue）

<!--组件交互相关代码（数据、方法等）-->
<script>
import {defineComponent} from 'vue'
export default defineComponent({
    name: "student",
    data() {
        return {
            name: "测试",
            address: '北京',
        };
    },
})
</script>
<!--组件的结构-->
<template>
    <div class="demo">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生年龄：{{ address }}</h2>
    </div>
</template>
<!-- 组件的样式-->
<style scoped>
.demo {
    background-color: orange;
}
</style>