---

前言

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。组件最大的优势就是可复用性

---

一、单文件组件的构成

vue组件基本包括以下几个方面：

1. 模板页面
2. js模块
3. 样式

<!--模板 -->
<template><h3>单文件组件</h3>
</template>
<!--js模块 -->
<script>
export default {name:"MyComponent"
}
</script>
<!--样式 -->
<style scoped>
h3{color: red;
}
</style>

二、组件引用

第一步：导入组件 import MyComponentVue from ./components/MyComponent.vue'

第二步：注册组件 components: { MyComponentVue }

第三步：引用组件标签 <MyComponentVue />

三、组件的应用举例

1.组件实例

定义两个组件 schoo.vue和student.vue
school.vue

<template><!-- 组件的结果 --><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>
</template><script>//组件的交互export default {name:'School',data(){return {name:'vue学院',address:'上海黄浦区'}},methods: {showName(){alert(this.name)}},}
</script><!-- 组件的样式 -->
<style>.demo{background-color: orange;}
</style>

student.vue

<template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>
</template><script>export default {name:'Student',data(){return {name:'张三',age:18}}}
</script>

在根组件App.vue 组件中，
①导入import组件
②注册组件
③引用组件标签

App.vue

<template><div><!-- 引用组件标签 --><School></School><Student></Student></div>
</template><script>// 导入组件import School from './School.vue'import Student from './Student.vue'export default {name:'App',// 注册组件components:{School,Student}}
</script>

2.显示结果

---