Vue组件化编程（模块与组件、模块化与组件化，非单文件组件，单文件组件）

最新推荐文章于 2024-05-02 08:06:07 发布

香甜的甲基橙

最新推荐文章于 2024-05-02 08:06:07 发布

阅读量451

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51249285/article/details/127729797

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Vue组件化编程

Vue组件化编程

1 什么是组件？2 组件化编程和传统的相比有什么优势？

传统方式编写应用

在这里插入图片描述

使用组件方式编写应用

在这里插入图片描述

组件的定义：

实现应用中局部功能代码和资源的集合

组件就是集合。代码就是css,html,js。资源指的是mp3,mp4,ttf,.zip

2.1 模块与组件、模块化与组件化

2.1.1. 模块

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

2.1.2. 组件

理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率

组件就是一块砖，哪里需要哪里搬

2.1.3. 模块化

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

2.1.4. 组件化

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

组件有两种编写形式：非单文件组件，单文件组件

2.2. 非单文件组件

一个文件中包含有n个组件

非单文件组件几乎不用，都是用单文件组件，但是在这里可以学到很多写法，先忍忍

模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

2.2.1 非单文件组件基本使用

Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？
——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？
——— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)

三、编写组件标签：

eg: 基本使用.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../代码/vue_basic/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>
	Vue.config.productionTip = false

	// 第一步：创建school组件
	// 只要在Vue创建组件都要用这个api : Vue.extend
	// 这是个函数调用，调用要传入配置对象
	const school = Vue.extend({
		template:`
		<div>
			<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:`
			<div>
				<h2>学生姓名：{{studentName}}</h2>
				<h2>学生年龄：{{age}}</h2>
			</div>
		`,
		data(){
			return {
				studentName:'张三',
				age:18,
			}
		}
	})

	//第一步：创建hello组件
	const hello = Vue.extend({
		template:`
			<div>
				<h2>你好啊！{{name}}</h2>
			</div>
		`,
		data(){
			return {
				name:'tom',
			}
		}
	})

	// 第二步：注册组件（局部注册）
	Vue.component('hello',hello)

	// 创建vm
	new Vue({
		el:'#root',
		data:{
			msg:'你好啊',
		},
		// 第二步：注册组件（局部注册）
		// components 组件 key(组件名) value(上面创建组件是命名的)
		components:{
			school,
			student,
		}
	})
	
	new Vue({
		el:'#root2',
	})
</script>

</html>

几个注意点

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../代码/vue_basic/js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		<h1>{{msg}}</h1>
		<school></school>
		<!-- 也可以写成这样的单标签，自闭合标签 -->
		<!-- <school/> -->
	</div>

	
</body> 

<script>
	Vue.config.productionTip = false

	// 定义组件
	const school = Vue.extend({
		// 开发者工具 显示的是这个name
		name:'atguigu',
		template:`
		<div>
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
		`,
		data(){
			return {
				name:'尚硅谷',
				address:'北京',
			}
		}
	})

	// 简写
	// 表面上是没有调用 Vue.extend,但是最终还是被调用了 可以去Vue源码里面看看
	// const school = {
	// 	name:'atguigu',
	// 	template:`
	// 	<div>
	// 		<h2>学校名称：{{name}}</h2>
	// 		<h2>学校地址：{{address}}</h2>
	// 	</div>
	// 	`,
	// 	data(){
	// 		return {
	// 			name:'尚硅谷',
	// 			address:'北京',
	// 		}
	// 	}
	// }

	new Vue({
		el:'#root',
		data:{
			msg:'欢迎学习Vue！'
		},
		components:{
			// school:school,
			// 同名直接简写
			// 此处注册叫什么名字，标签就叫什么
			school
		}
	})
</script>

</html>

2.2.2 组件的嵌套

在这里插入图片描述

图中蓝色的在红色里面，这个就是嵌套。父子关系。

eg. 组件的嵌套.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../代码/vue_basic/js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		
	</div>

	
</body> 

<script>
	Vue.config.productionTip = false

	// 定义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组件
	// 用app管理所有的组件，app被vm管理
	const app = Vue.extend({
		template:`
		<div>
			<hello></hello>	
			<school></school>
		</div>
		`,
		components:{
			school,
			hello,
		}
	})

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

</html>

在这里插入图片描述

2.2.3 VueComponent函数

要想更加理解组件，需要了解VueComponent

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

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

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

4.关于this指向：

(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

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

eg.VueComponent.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					// this是VueComponent实例对象
					console.log('showName',this) 
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})


		// console.log('@',school)
		// console.log('#',hello)

		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>
</html>

vc和vm能划等号吗？

在这里插入图片描述

一个重要的内置关系

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

此处vc只是我们自己的简便叫法，vm是程序员们官网都说的，而vc是我们自己起的名字，出去别人问，就说是组件实例对象，
组件实例对象怎么理解？就是一个小型的vm，跟vm比还差点事，他的data必须写成函数，不能写el配置项

eg.一个重要的内置关系.html

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

部分代码分析：

在这里插入图片描述

Vue与VueComponent的关系

在这里插入图片描述

可以补一下原型链的知识

2.3. 单文件组件

一个文件中只包含有1个组件

既然要写单文件组件了，就要写xxxx.vue，单文件组件后缀都是vue结尾。.vue文件要经过加工处理编程.js浏览器才认识
处理加工：
1 webpack(自己搭建工作流，有点麻烦，而且效果可能不太好)
2 脚手架(借助Vue官方提供的,别惹女帮我们搭建好的webpack,我们直接用)

2.3.1. 一个.vue 文件的组成(3个部分)

命名：

一般开发都是使用 School.vue 或者 MySchool.vue 这个能跟开发者工具里面呈现的能呼应上

回顾：
组件的定义：实现界面局部功能的代码和资源的集合三个元素 html css js

模板页面

<template>
页面模板
</template>

JS 模块对象

<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>

样式

<style>
样式定义
</style>

踩一下非单文件组件：非单文件组件的样式不能跟着组件走

在这里插入图片描述

2.3.2. 基本使用

引入组件

别人在使用这个组件时，需要通过import去引入，我们组件里面就需要暴露他才能发现

模块化的引入不太熟悉，建议去看es6模块化内容

在这里插入图片描述

const school = Vue.extend({
	data() {
		return {
		schoolName: "尚硅谷",
		address: "北京昌平",
		};
	},
	methods: {
		showName() {
		alert(this.schoolName);
		},
	},
});
export default school

上面的写法可以简化

export default{
  name:'school'
  data() {
	return {
		schoolName: "尚硅谷",
		address: "北京昌平",
		};
	},
	methods: {
		showName() {
		alert(this.schoolName);
		},
	},
}

2.3.3 单文件组件代码案例

main.js 管理 App.vue, App.vue 管理 Student.vue, School.vue
Student.vue, School.vue写每一个功能组件，App.vue是汇总的，main就是最大级别的，vm

书写顺序：

Student.vue, School.vue —> App.vue —> main.js —> index.html

整理一下一整个流程代码逻辑：

我们打开index.html，准备好一个容器，然后，引入vue，再引入main.js，一切的开端来自main.js,我们把它叫做入口文件。然后就进入到了main.js，引入App.vue，然后来到App.vue，里面有template结构，又引入了Student.vue, School.vue，引入的时候就开始读取这个文件了，就绪之后，然后就注册，再把整个模板解析。这样就把main.js里面引入的App.vue执行完了，执行完之后就去new Vue(因为在引入mian.js之前就引入了vue.js所以main就可以直接new 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

<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

import App from './App.vue'

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

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>

运行起来有报错

在这里插入图片描述

但是，一旦我们把这些代码放在了脚手架里面就运行起来了

再总结一下：

打开一个组件，template里面写结构，script里面写脚本，脚本里面包括给组件命名，配置数据，style里面配置样式，App.vue是汇总所有组件的，main.js创建vue实例，并且指明为哪个容器服务，页面在index.html。html里面引入的vue.js main,js意义不大，这个东西是不能运行的，只要放在脚手架里面就好了