vue2知识点：非单文件组件和单文件组件

刘大猫.

已于 2022-07-22 20:11:23 修改

阅读量641

点赞数

分类专栏： Vue2专栏文章标签： vue.js vue2 单文件组件非单文件组件

于 2022-05-26 23:18:59 首次发布

本文链接：https://blog.csdn.net/a924382407/article/details/124994838

版权

Vue2专栏专栏收录该内容

109 篇文章 45 订阅

订阅专栏

在这里插入图片描述

文章目录

3.3非单文件组件
3.4单文件组件
本人其他相关文章链接

3.3非单文件组件

问题：“单文件组件”与“非单文件组件”区别？

在这里插入图片描述

3.3.1使用Vue.extend({})方式创建组件(了解，实际不常用)

Vue.extend({})属于vue的全局API，在实际业务开发中很少使用，因为相比较vue.component来说，使用Vue.extend({})更加繁琐，但在一些独立组件开发场景中，Vue.extend+$mount是个不错的选择。
在这里插入图片描述
注意点1：Vue.extend的配置参数中不可以使用el绑定挂在id，跟创建vm实例不同

注意点2：组件使用方式3步：

第一步：创建组件
第二步：注册主键
第三步：使用组件

注意点3：注册局部组件可以写简写方式

普通方式：K,V形式，其中前面的K才是主键真实名字，后面V名字不起效果，当然为了方便辨认，创建的名字K,V尽量保持一致即可

components:{
	'hello': 'hello': 
	}

简写方式：只保留K即可，省略V

components:{
	'hello' 
	}

注意点4：组件名由一个单词组成小写hello，实际在Vue开发者工具中会首字母大写Hello，组件名由多个单词组成，实际在Vue开发者工具中会多个单词首字母都大写，当然只是个展示样式而已。

注意点5：定义组件简写形式const school = Vue.extend(options) 可简写为：const school = options，说明定义组件时未绑定Vue.extend，那么vue会默认包裹一层Vue.extend，如果定义组件绑定了Vue.extend，那么vue就会跳过包裹步骤。
在这里插入图片描述

举例：

<div id="root">
<!-- 第三步：使用组件标签 -->			
    <hello></hello>
	<hr>
	<h1>{{msg}}</h1>			
</div>

<script type="text/javascript">
//第一步：创建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:{
		'hello'
	}
})

3.3.2组件嵌套

举例：练习组件嵌套

在这里插入图片描述

div id="root">
</div>

<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>
					<hello></hello>
					<school></school>
				</div>
			`,
        components:{
            school,
            hello
        }
    })

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

3.3.3VueComponent构造函数

注意点1：vm管理一堆的vc

注意点2：

问题：vc和vm区别？ vc≠vm

答案：
相同点：属性和方法99%相同
不同点：
1）vm可以绑定el决定为哪个容器服务，而vc不可以，vc只能被vm管理
2）vm的data可定义对象形式，可定义函数形式，而vc中data只能定义函数形式
在这里插入图片描述
注意点3：“组件实例对象” =》简称vc

问题：“组件实例对象”是啥呢？

答案：就是小型的vm

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

3.3.4一个重要的内置关系

注意点1：

Demo.prototype  =》 指代Demo函数上面的“显示原型属性”
d.__proto__  => 指代实例d上面的“隐式原型属性”
无论是“Demo函数上面的显示原型属性”还是“实例d上面的隐式原型属性”都指向同一个对象，它叫“原型对象”

在这里插入图片描述
注意点2(重要)：

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

注意点3(重要)：一句话：实例的隐式原型属性永远指向自己缔造者的原型对象
在这里插入图片描述
注意点4：下面图将展示注意点2的关系，即“让组件实例对象（vc）可以访问到 Vue原型上的属性、方法”。

3.4单文件组件

在这里插入图片描述

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结

刘大猫.

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2知识点：非单文件组件和单文件组件

文章目录

3.3非单文件组件

3.3.1使用Vue.extend({})方式创建组件(了解，实际不常用)

举例：

3.3.2组件嵌套

举例：练习组件嵌套

3.3.3VueComponent构造函数

3.3.4一个重要的内置关系

3.4单文件组件

本人其他相关文章链接