【Vue组件化编程】18.非单文件组件

已于 2022-12-19 21:54:37 修改
阅读量64 收藏
点赞数
分类专栏： # 【Vue教程】 文章标签： vue.js 前端 javascript
于 2022-12-19 21:45:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beiluoL/article/details/128378122
版权

var code = “f687a34a-1211-4cef-97c7-0ce82b25e779”

Vue中使用组件的三大步骤：

一、定义组件(创建组件)

如何定义一个组件？

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

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

//第一步：创建school组件
		const school = Vue.extend({
			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:`
				<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'
				}
			}
		})

二、注册组件

如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component(‘组件名’,组件)

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

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})

三、使用组件(写组件标签)

编写组件标签：

	<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

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

四、完整代码

<!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:`
				<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:`
				<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:{
				school,
				student
			}
		})

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

几个注意点：

1.关于组件名:

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

2.关于组件标签:

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

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

组件的嵌套

<!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:'hello student',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'hello school',
					address:'深圳school'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'hello测试！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{1
				school,
				hello
			}
		})

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

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。

<!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:'学校名称school',
					address:'学校地址school'
				}
			},
			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>

一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

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

<!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:'school',
					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>
我有满天星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2组件化编程——非单文件组件、单文件组件
Concise200的博客
02-25 879
Vue组件化编程1.组件化编程 vs 传统方式编程2. 组件与模块3. 非单文件组件定义组件注册组件使用组件完整代码组件名 / 组件标签 1.组件化编程 vs 传统方式编程 传统方式编程在代码复用上比较麻烦，复用率不高。且在大型项目中若使用传统方式编程，文件依赖关系混乱，不好维护。 组件方式编程很好的避免了传统方式编程的缺点，通过引入提高代码复用率。 2. 组件与模块 js的模块化简单理解就是将一个复杂的js文件拆分为多个js文件 。在 js 文件很复杂的情况下， 模块可以复用 js, 简化 js
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
小飞的博客
01-19 925
组件 实现局部功能的代码和资源的集合 非单文件组件 1.定义组件（创建组件） 2.注册组件 3.使用组件（写组件标签） 定义 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的有点区别 el不写。最终所有的组件要经过vm的管理，有vm中的el决定哪个容器 data必须写成函数。避免组件复用时，数据存在引用关系 使用template配置组件结构 注册 局部注册：new Vue时传入components选项 全局注册：使用Vue.componen
浅谈Vue组件化编程思想及组件化的构建
maohe的博客
02-06 886
Vue组件化编程，对非单文件组件和单文件组件的创建方式，组件的嵌套，VC原型链的更改，vue脚手架的简易使用进行了演示和说明。
Vue 组件化编程、VueComponent实例对象
YuLong的博客
12-24 3217
文章目录模块与组件、模块化与组件化非单文件组件单文件组件 模块与组件、模块化与组件化 模块： 理解: 向外提供特定功能的 js 程序，一般就是一个 js 文件 为什么: js 文件很多很复杂 作用: 复用 js，简化 js的编写，提高 js 运行效率 组件： 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……) 为什么: 一个界面的功能很复杂 作用: 复用编码，简化项目编码，提高运行效率 模块化： 当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应
Vue（三）——组件化编程
路过Coder
11-08 837
1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件2. 为什么: js 文件很多很复杂3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率。
前端学习笔记 | Vue组件化编程
m0_53522458的博客
04-02 906
尚硅谷vue2/vue3的vue2笔记：组件、非单文件组件、组件原理、单文件组件、vue脚手架、ref配置、props配置、mixin混入、组件化编码流程、组件自定义事件、全局事件总线、消息订阅与发布、$nextTick、配置代理、vue-resource、插槽、vuex、路由、UI组件库
前端之Vue组件(非单文件组件)
weixin_46372074的博客
05-02 681
Vue组件Vue组件1.什么是Vue组件2.组件式编程有什么好处 Vue组件 1.什么是Vue组件 2.组件式编程有什么好处
Vue基础8之Vue组件化编程、非单文件组件与单文件组件
qq_34306228的博客
12-23 1044
h2>学校地址：{{address}}学生姓名：{{name}}学校地址：{{address}}学校地址：{{address}}学校名称：{{name}}学校名称：{{schoolName}}学校名称：{{name}}学生姓名：{{name}}老师姓名：{{name}}学校名称：{{name}}
Vue 组件之非单文件组件
可爱不能当饭吃
12-05 1955
非单文件组件：一个文件中包含有 n 个组件 一、组件 组件的定义——实现应用中局部功能代码和资源的集合 组件： 理解：用来实现局部（特定）功能效果的代码集（html/css/js...） 为什么：一个界面的功能很复杂 作用：复用编码，简化项目编程，提高运行效率 组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用 模块化：当应用中的 js 都以模块来缩写的，那这个应用就是一个模块化的应用（相当于把一个.js文件分成多个.js文件） 二、Vue 中...
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue - Vue组件化编程.doc
07-08
总结，Vue组件化编程让开发者能够以模块化的方式组织和管理代码，提高开发效率和代码质量。通过单文件组件，我们可以清晰地看到组件的全貌，同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
Axios 在 Vue 组件化中的应用 Axios 是一个基于 promise 的 HTTP 客户端库，广泛应用于前端开发中，特别是在 Vue 组件化中。下面将详细介绍在 Vue 组件化中利用 Axios 处理 Ajax 请求的使用方法。 Axios 的基本...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1211
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1448
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 171
vue 自定义滚动条同步拖动（移动端）
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 499
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
【JavaScript-Vue】-Vue知识体系详解
07-25
Vue基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue是一个独立的社区驱动的项目，于2014年由尤雨溪作为个人项目创建。它经历了无数实战考验，是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值