第二章 Vue组件化编程

不会&编程

已于 2024-02-16 18:52:56 修改

阅读量666

点赞数 21

分类专栏： Web前端 Vue的系统学习文章标签： vue.js 前端 javascript

于 2024-01-30 18:38:37 首次发布

本文链接：https://blog.csdn.net/m0_56878426/article/details/135369734

版权

Web前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue的系统学习

2 篇文章 0 订阅

订阅专栏

1 模块与组件

1.1 传统方式

第一个问题：依赖关系混乱，不好维护。例如：提取某一份CSS文件时，需要单独分析其功能（通过设置特定的名字可以解决）；哪个HTML引入CSS了，需要去查询

第二个问题：代码复用率不高。如图所示，两个HTML文件都用了同样的顶部和底部代码，复用率不高。

1.2 组件方式

组件的图解

一张图就能解释清楚，如图所示：

可以看到，两个HTML文件的顶部和底部都复用了同一个组件

组件的结构图解

由图可知：

组件由vm控制，类似树的根结点
组件可以嵌套

1.3 组件和模块的定义

模块

定义：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么用：js 文件很多很复杂
作用：复用 js，简化 js 的编写，提高 js 运行效率

当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用

组件

定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
为什么用：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

2 非单文件组件

2.1 基本概念

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

2.2 基本使用

总结

Vue中使用组件的三大步骤

定义组件(创建组件)
注册组件
使用组件(写组件标签)

如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：

el不要写，为什么？

最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

data必须写成函数，为什么？

避免组件被复用时，数据存在引用关系（即使用函数返回时的变量都拥有独立的内存，变量的值一样但却是互相独立的）

如何注册组件？

局部注册：new Vue的时候传入components选项，局部注册用得多
全局注册：Vue.component('组件名',组件)

编写组件标签：<school></school>

组件名称：由components配置项中的键决定

例子

用一个例子来解释上述总结，认真看就能懂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件
		const school = Vue.extend({
			//template可理解为配置组件的结构和内容
			template:`
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
			// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			data(){
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			//template可理解为配置组件的结构和内容
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			//template可理解为配置组件的结构和内容
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
                //简写形式，完整的是 school:school,student:student
                //起其它名字也可以，比如xuexiao:school之类的
                //同名是为了简写形式，这样方便
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>
</html>

效果如下：

2.3 注意事项

总结

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school
第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (官方推荐，但需要Vue脚手架支持)

备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法：<school></school>
第二种写法：<school/>
备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({
			name:'atguigu',//可以使用name配置项指定组件在开发者工具中呈现的名字。
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school:s
			}
		})
	</script>
</html>

效果如下：

Vue开发者工具显示name配置项的名字：

2.4 组件的嵌套

总结

组件嵌套如图所示：

每个组件只能使用自己注册的组件
如果一个组件的子组件注册了其它组件，也只能是子组件使用

例子

嵌套关系如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<school></school>
					<hello></hello>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
			template:`
			<div>	
				<app></app>
			</div>
			`,
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>
</html>

效果如下：

2.5 VueComponent

总结

关于VueComponent：

1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2、我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

4、关于this指向：

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象

5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象），Vue的实例对象，以后简称vm

6、vm 是 new Vue(options) 创造出来的，vc 是new VueComponent(options)创造出来的

Vue.extend的拓展

Vue.extend只要被调用，其过程：

创建Sub=function VueCompnent
return Sub

此每一次的Vuecompnent都是不同的

2.6 一个重要的内置关系

原型对象

构造函数的.prototype和实例对象的._proto都指向了原型对象

//定义一个构造函数
function Demo(){
	this.a = 1
	this.b = 2
}
//创建一个Demo的实例对象
const d = new Demo()

console.log(Demo.prototype) //显示原型属性

console.log(d.__proto__) //隐式原型属性

console.log(Demo.prototype === d.__proto__)

//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99

console.log('@',d)

结果如下：

对于上述代码，当访问 d.x 时，会主动查找原型对象，从而找到 d.x

一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法

例子

school实例对象通过 __proto__ 找到VueComponent的原型对象
VueComponent的原型对象通过 __proto__ 找到 Vue 的原型对象，从而找到 x

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.prototype.x = 99 //添加数据

		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					console.log(this.x)
				}
			},
		})

		//创建一个vm
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})

		
		//定义一个构造函数
		/* function Demo(){
			this.a = 1
			this.b = 2
		}
		//创建一个Demo的实例对象
		const d = new Demo()

		console.log(Demo.prototype) //显示原型属性

		console.log(d.__proto__) //隐式原型属性

		console.log(Demo.prototype === d.__proto__)

		//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
		Demo.prototype.x = 99

		console.log('@',d) */

	</script>
</html>

效果如下：

3 单文件组件

安装插件

为了让 .Vue 文件的代码高亮，需要安装插件

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:'尚硅谷',
				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:

App 组件如果想使用 School 和 Student 组件，要引入组件

<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>

main.js:

在 main.js 里面创建 Vue，并且引入 App组件（App组件会管理所有的子组件）

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

index.html

index.html 负责准备一个容器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="./main.js"></script>
	</body>
</html>

不会&编程

关注

21
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
第二章 Vue组件化编程

模块定义：向外提供特定功能的 js 程序，一般就是一个 js 文件为什么用：js 文件很多很复杂作用：复用 js，简化 js 的编写，提高 js 运行效率当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用组件定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）为什么用：一个界面的功能很复杂作用：复用编码，简化项目编码，提高运行效率当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
复制链接

扫一扫