Vue组件化编程（非单文件组件）_编写出非单文件组件框架结构-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45080272/article/details/125823752

本文详细介绍了Vue组件化的概念，包括模块化与组件化的区别，以及非单文件组件的创建、注册和使用。通过示例展示了如何定义、注册和使用组件，并强调了组件命名、嵌套及VueComponent构造函数的作用。此外，还提到了组件实例对象与Vue原型之间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue组件化编程

1、模块与组件、模块化与组件化
2、非单文件组件

1、模块与组件、模块化与组件化

在这里插入图片描述

模块

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

组件

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

模块化

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

组件化

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

2、非单文件组件

非单文件组件：一个文件中包含有 n 个组件
单文件组件：一个文件中只包含有 1 个组件后缀.vue

2.1 非单文件的基本使用方法

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

1、如何定义一个组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别
区别如下：
- （1）el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
- （2）data必须写成函数，避免组件被复用时，数据存在引用关系
  备注：使用 template 可以配置组件结构。
2、注册组件
- a、局部注册：new Vue()的时候options传入components选项
- b、全局注册：Vue.component(‘组件名’,组件)
3、使用组件
- 编写组件标签如

<!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>非单文件组件</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		<!-- 第三步：编写组件标签 -->
		<school></school>
		<hello></hello>
		<hr>
		<student></student>
		<hello></hello>
	</div>
	<div id="root2">
		<hello></hello>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
	// 第一步：创建school组件 extend(延长扩展)
	const school = Vue.extend({
		// 	el: '#root', // 组件定义时一定不要写 el 配置项，因为最终所有的组件都要被一个vm管理，由vm 决定服务于哪个容器
		template: `
			<div>
				<h2>学校名称：{{schoolName}}</h2>
				<h2>学校地址：{{address}}</h2>	
			</div>
			`,
		data() {
			return {
				schoolName: '尚硅谷',
				address: '北京昌平',
			}

		}
	})
	// 第一步：创建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> 
          <h3>你好啊！{{name}}</h3>
        </div>
      `,
		data() {
			return {
				name: 'cess'
			}
		}
	})

	//第二步：全局注册组件
	Vue.component('hello', hello)
	// 创建 vm
	new Vue({
		el: '#root',
		// 第二步：注册组件（局部注册）
		components: {
			school,
			student
		}
	})
</script>

</html>

2.2 组件注意事项

1、关于组件名

一个单词组成
- 第一种写法（首字母小写）：school
- 第二种写法（首字母大写）：School
2、多个单词组成
- 第一种写法（kebab-case 命名）：my-school
- 第二种写法（CamelCase 命名）：MySchool（需要Vue脚手架支持）
  备注
- （1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
- （2）可以使用name配置项指定组件在开发者工具中呈现的名字

2、关于组件标签

第一种写法：
第二种写法：（需要Vue脚手架支持）
备注：不使用脚手架时，会导致后续组件不能渲染

3、一个简写方式：
const school = Vue.extend(options)可简写为const school = options，因为父组件components引入的时候会自动创建

<!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>几个注意点</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>{{msg}}</h2>
		<school></school>
	</div>
</body>

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

	//定义组件
	const school = Vue.extend({
		name: 'atguigu', // 组件给自己起个名字，用于在浏览器开发工具上显示
		template: `
				<div>
					<h3>学校名称：{{name}}</h3>	
					<h3>学校地址：{{address}}</h3>	
				</div>
			`,
		data() {
			return {
				name: '电子科技大学',
				address: '成都'
			}
		}
	})

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

</html>

2.3 组件嵌套

在这里插入图片描述

<!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>组件的嵌套</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<div id="root"></div>
</body>

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

	//定义student组件
	const student = Vue.extend({
		name: 'student',
		template: `
				<div>
					<h4>学生姓名：{{name}}</h4>	
					<h4>学生年龄：{{age}}</h4>	
  			</div>
			`,
		data() { return { name: '尚硅谷', age: 18 } }
	})

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

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

	//定义app组件
	const app = Vue.extend({
		template: `
				<div>	
					<hello></hello>
					<school></school>
  			</div>
			`,
		components: { school, hello }
	})

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

</html>

2.4 VueComponent 构造函数

关于 VueComponent

1、school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，而是 Vue.extend() 生成的
2、我们只需要写 < school /> 或 < school>< /school>，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

<!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>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() { 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>