Vue学习教程-18Vue单文件组件

文章目录

• 前言
• 一、单文件组件的构成
• 二、组件引用
• 三、组件的应用举例
• • 1.组件实例
  • 2.显示结果

---

前言

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.显示结果

---