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

导读:本篇文章讲解 vue2知识点:非单文件组件和单文件组件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

在这里插入图片描述

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单文件组件

在这里插入图片描述

本人其他相关文章链接

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

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属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

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遇到过的问题及个人总结

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/106191.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!