Vue非单文件组件和单文件组件

最新推荐文章于 2023-01-10 11:40:55 发布

LeeGaKi

最新推荐文章于 2023-01-10 11:40:55 发布

阅读量450

点赞数

分类专栏：前端基础和框架使用文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_58473601/article/details/124139453

版权

前端基础和框架使用专栏收录该内容

12 篇文章 0 订阅

订阅专栏

组件（Component）是 Vue.js 最强大的功能之一。

非单文件组件：一个文件中有n个组件

单文件组件：一个文件只有1个组件后缀为.vue 一个文件就是一个组件

单文件组件代码清晰复用性长。

	<body>

		<div id="box">
			<ss></ss>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			//写组件，组件中含有自己的数据自己的格式
			const school = Vue.extend({
				// 组件结构
				template: `
				<div><p>学校：{{schoolName}}</p>
				<p>学生·：{{stu.stuName}}</p></div>
				`,
				// 函数式传值
				data() {
					return {
						schoolName: "春苗",
						stuName: "李佳琪",
						stu: {
							stuName: "李琪"
						}
					}
				}
			})
			// 全局注册组件
			// 传入两个参数，一个是组件用的时候名，一个是定义时的组件名
			Vue.component("ss",school)
			
			var demo = new Vue({
				el: "#box",
				// 局部将定义好的组件注册到vue中
				components: {
					school: school
				}
			})
		</script>
	</body>

单文件组件文件结构：

文件为.vue结尾的文件

<template>
<!--  这里是html-->
  <div>
    主页
  </div>
</template>

<script>
//这里是js
export default {
  name: "IndexPage"
}
</script>

<style scoped>
/*这里是css*/
</style>