热门标签
热门文章
- 1深度学习记录--Batch Norm
- 2matlab基于遗传算法的多目标优化算法（附代码获取方法）_多目标遗传算法matlab程序
- 3Ubuntu系统下电脑驱动的安装(wifi无线网卡)
- 4【小吉测评】高效简洁的数据库管控平台—CloudQuery_数据库 统一纳管平台
- 5Python基础（二）--数据类型，运算符与流程控制_sys.float_info.min
- 6学IT毕业后该去哪个城市？哪个岗位薪资高？哪些公司待遇好？_上海 武汉哪个地方更适合计算机行业
- 7ModuleNotFoundError: No module named ‘xxx ’问题解决方法
- 8基于微信山西太原某大学球馆预约预约小程序系统设计与实现 研究背景和意义、国内外现状
- 9基于掩蔽生成知识蒸馏（MGD）的钢铁表面缺陷检测_masked generative distillation代码
- 10蓝桥杯2019 第十届 c/c++ c组第3题 求切割方形（30行代码 简洁！）_c语言一个人找到一块a×b的板子切割成需要的n×n的正方形,至多可以切几块
当前位置: article > 正文
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题
作者：凡人多烦事01 | 2024-02-14 23:38:02
赞
踩
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题
码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi
VUE基础篇（组件化component、components）
1、组件化的概念
■人面对复杂问题的处理方式
口任何一个人处理信息的逻辑能力都是有限的
口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
口但是,我们人有一种天生的能力,就是将问题进行拆解。
口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。
■组件化也是类似的思想
口如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
口但如果，我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
■组件化是Vue.js中的重要思想
口它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
口任何的应用都会被抽象成一颗组件树。
■组件化思想的应用:
口有了组件化的思想,我们在之后的开发中就要充分的利用它。
口尽可能的将页面拆分成一个个小的、可复用的组件。
口这样让我们的代码更加方便组织和管理,并且扩展性也更强。
2、组件的基本使用
■组件的使用分成三个步骤
口创建组件构造器
口注册组件
口使用组件。
■我们来看看通过代码如何注册组件
■查看运行结果:
口和直接使用一个div看起来并没有什么区别。
口但是我们可以设想,如果很多地方都要显示这样的信息,我们是不是就可以直接使用来完成呢？
注：在模板中的标签内容，如果是多个标签内容，必须在标签的最外层包裹一个父类标签，所有的标签都必须放在父类标签中，否则报错 ，不管是在html中还是js中定义绑定标签内容的方式都得遵循多标签内容外部必须包裹一个父类标签，也就是说做外层只能有一个标签作为根标签。
可以看到下面的所有代码组件关联绑定的模板外层都包裹着<div>这个标签，因为<div>内部的内容也就是多标签内容了，所以我们要用<div>包裹起来作为父元素(根元素)，不管外层是什么类型标签，即使是<p>、<span>等等其他标签作为外部的根标签（父标签）都行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的基本使用</title> </head> <body> <!-- ■人面对复杂问题的处理方式 口任何一个人处理信息的逻辑能力都是有限的 口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。 口但是,我们人有一种天生的能力,就是将问题进行拆解。 口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。 ■组件化也是类似的思想: 口如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 口但如果，我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。 --> <!-- ■组件化是Vue.js中的重要思想 口它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 口任何的应用都会被抽象成一颗组件树。 ■组件化思想的应用: 口有了组件化的思想,我们在之后的开发中就要充分的利用它。 口尽可能的将页面拆分成一个个小的、可复用的组件。 口这样让我们的代码更加方便组织和管理,并且扩展性也更强。 --> <!-- ■组件的使用分成三个步骤 口创建组件构造器 口注册组件 口使用组件。 ■我们来看看通过代码如何注册组件 ■查看运行结果: 口和直接使用一个div看起来并没有什么区别。 口但是我们可以设想,如果很多地方都要显示这样的信息,我们是不是就可以直接使用<my-cpn></my-cpn>来完成呢？ --> <div id="app"> <!-- 3、组件的使用，注册组件时如果组件名称是驼峰命名，会按照驼峰拆分为以-拼接的名称--> <my-div></my-div> </div> <script src="../js/vue.js"></script> <script> // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容 const myDiv = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容一</p> <p>我是内容二</p> </div>` }) // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象 Vue.component('myDiv', myDiv) const app = new Vue({ el: "#app", data: {} }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
效果
3、全局组件和局部组件
全局组件是可以在所有的vue对象实例对应的标签内使用的，而局部组件只能在局部组件所在的vue对象实例对应的标签中使用
全局组件注册：
Vue.component(组件名, 组件对象)
// 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
Vue.component('myDiv', myDiv)
- 1
- 2
局部组件注册：
components: {组件名1:组件对象,组件名2:组件对象2…}
const app2 = new Vue({
el: "#app2",
data: {},
//■【局部组件的注册方式，只在本实例中才会生效】
// 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件
components: {
myDiv2: myDiv
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局组件和局部组件</title> </head> <body> <div id="app"> <!-- 3、组件的使用--> <!-- 全局组件的使用--> <span style="color: red">全局组件</span> <my-div></my-div> <my-div></my-div> <!-- 局部组件，在本实例对象中不会生效，该组件定义在app2中--> <span style="color: red">my-div2局部组件不在非注册vue实例中显示</span> <my-div2></my-div2> </div> <hr> <div id="app2"> <!-- 3、组件的使用--> <!-- 全局组件，在任何vue实例都可以使用--> <span style="color: red">全局组件</span> <my-div></my-div> <!-- 局部组件，只在本实例对象中生效--> <span style="color: red">my-div2局部组件显示(在注册vue实例对象中)</span> <my-div2></my-div2> </div> <script src="../js/vue.js"></script> <script> // ■【全局组件的方式，可以在多个vue实例使用】 // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容 const myDiv = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是内容一</p> <p>我是内容二</p> </div>` }) // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象 Vue.component('myDiv', myDiv) // ----------------------------------------------------------------------------------------------- // vue实例1 const app = new Vue({ el: "#app", data: {} }); // vue实例2 const app2 = new Vue({ el: "#app2", data: {}, //■【局部组件的注册方式，只在本实例中才会生效】 // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件 components: { myDiv2: myDiv } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
效果
3、父子组件
所谓父子组件就是组件的嵌套，假设：组件2嵌套组件1（也就是组件2中包含组件1），父组件就是组件1，子组件就是组件2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父组件和子组件</title> </head> <body> <div id="app"> <!-- 3、组件的使用--> <!-- 组件2中包含组件1--> <my-div2></my-div2> <!-- 该组件1是不可直接使用的，因为没有在root组件中注册过--> <my-div1></my-div1> </div> <script src="../js/vue.js"></script> <script> // 1、创建组件构造器,创建一个组件对象 // 【子组件】 // 创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容 const myDiv1 = Vue.extend({ template: ` <div> <h2>我是标题1</h2> <p>我是内容1</p> </div>` }) // 【父组件】 // 嵌套子组件，extend方法传入对象，对象里面的components属性，也是可以将另一个组件对象添加进该组件的，components对应对象的属性名称是组件的名称，属性值是已经创建的组件对象 // 这里的子组件是上面创建的组件对象 const myDiv2 = Vue.extend({ template: ` <div> <h2>我是标题2</h2> <p>我是内容2</p> <my-div1></my-div1> </div>`, components: { myDiv1: myDiv1 } }) /*------------------------------------------------------------------------------------------------------------------------*/ // root组件 const app = new Vue({ el: "#app", data: {}, //■【局部组件的注册方式，只在本实例中才会生效】 // 2、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件 //这里注册组件2即可，组件1已经注册进了组件2，所以使用组件2时就是组件2嵌套组件1的样子 components: { myDiv2: myDiv2 } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
效果
4、组件语法糖
●在之前注册组件的方式，可能会有些繁琐。
口Vue为了简化这个过程,提供了注册的语法糖。
口主要是省去了调用Vue.extend()的步骤,也就是构造组件对象这个步骤，而是可以直接使用一个组件对象来代替。说的再直白点就是将组件的对象的构造和注册合而为一了，在注册组件时，直接传入组件对象即可
口全局组件对象和局部组件对象的结构是一样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件语法糖</title> </head> <body> <div id="app"> <!-- 2、使用组件--> <my-div1></my-div1> <my-div2></my-div2> </div> <script src="../js/vue.js"></script> <script> /* ●在之前注册组件的方式，可能会有些繁琐。 口Vue为了简化这个过程,提供了注册的语法糖。 口主要是省去了调用Vue.extend()的步骤,而是可以直接使用一个组件对象来代替。 口全局组件对象和局部组件对象的结构是一样的 */ // ■【注册全局组件的语法糖】 // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象， // 组件对象有一个template属性，属性值为模板信息 Vue.component('myDiv1', { template: ` <div> <h2>我是标题1</h2> <p>我是内容1</p> </div> ` }) //■【注册局部组件的语法糖】 const app = new Vue({ el: "#app", data: {}, //■【局部组件的注册方式，只在本实例中才会生效】 // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件 components: { //这里相当于将组件的创建与注册整合成了一个方式，注册组件时可以直接绑定对象，对象有个template属性，属性值就是我们的模板信息 myDiv2: { template: ` <div> <h2>我是标题2</h2> <p>我是内容2</p> </div> ` } } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
效果
4、组件对象与组件注册的分离
■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法
■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。
■Vue提供了两种方案来定义HTML模块内容:
口使用<script>标签
口使用<template>标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件语法糖分离版本</title> </head> <body> <div id="app"> <!-- 2、使用组件--> <my-div1></my-div1> <my-div2></my-div2> </div> <!-- ■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法 ■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。 ■Vue提供了两种方案来定义HTML模块内容: 口使用<script>标签 口使用<template>标签 --> <!--第一种写法：template标签--> <template id="myDiv1"> <div> <h2>我是标题1</h2> <p>我是内容1</p> </div> </template> <!--第二种写法：script标签，注意类型必须是text/x-template--> <script type="text/x-template" id="myDiv2"> <div> <h2>我是标题2</h2> <p>我是内容2</p> </div>` </script> <script src="../js/vue.js"></script> <script> // ■【注册全局组件的语法糖】 // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象， // 组件对象有一个template属性，属性值为绑定template标签或script标签的id Vue.component('myDiv1', { template: "#myDiv1" }) //■【注册局部组件的语法糖】 const app = new Vue({ el: "#app", data: {}, //■【局部组件的注册方式，只在本实例中才会生效】 // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件 // 构造的组件有一个template属性，值为要绑定的template标签或script标签的id components: { myDiv2: { template: '#myDiv2' } } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
4、组件动态绑定数据-数据存放问题
之前我们的写法中，组件内的数据都是写死的，那么怎么绑定动态数据呢，还是用vue实例中的data属性对应的数据对象？错
■组件自己的数据存放在哪里呢?
口组件对象也有一个data属性(也可以有methods等属性,下面我们有用到)
口只是这个data属性必须是一个函数
口而且这个函数返回一个对象,对象内部保存着数据
■为什么data属性必须是一个函数，函数返回一个对象,对象内部保存着数据?
口因为要实现组件复用，实现组件复用就必须满足组件指向的数据对象不能是同一个数据对象
口因为data是直接return返回的一个对象，所以这里调用相当于创建实例时，每个data返回的都是一个单独的data数据对象，这样才能做到组件的复用，要是data指向同一个对象，可以想象，每次实例化组件对象时，每个data都指向的是同一个数据对象，就不能进行复用了，因为只要其中一个组件改变了data数据，那么其他组件也就跟着变化了，这很明显是不符合逻辑的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件动态绑定数据</title> </head> <body> <!-- ■组件自己的数据存放在哪里呢? 口组件对象也有一个data属性(也可以有methods等属性,下面我们有用到) 口只是这个data属性必须是一个函数 口而且这个函数返回一个对象,对象内部保存着数据 --> <div id="app"> <!-- 2、使用组件--> <!-- 全局组件--> <p>全局组件</p> <my-div1></my-div1> <hr> <!-- 局部组件--> <p>局部组件</p> <my-div2></my-div2> <!-- ■这里是相当于创建了四个组件对象，每个组件对象是互不影响的，这和组件对象的data属性为什么是函数有关？ 因为data是直接return返回的一个对象，所以这里调用相当于创建实例时，每个data返回的都是一个单独的data数据对象， 这样才能做到组件的复用，要是data指向的一个对象，可以想象，每次实例化组件对象时，每个data都指向的是同一个数据对象，就不能 进行复用了，因为只要其中一个组件改变了data数据，那么其他组件也就跟着变化了，这很明显是不符合逻辑的 --> <!-- <my-div1></my-div1>--> <!-- <my-div1></my-div1>--> <!-- <my-div2></my-div2>--> <!-- <my-div2></my-div2>--> </div> <!--第一种写法：template标签--> <template id="myDiv1"> <div> <!-- 组件动态绑定属性--> <h2>{{title1}}</h2> <p>{{content1}}</p> <p>{{counter}}</p> <button @click="counterAdd">-</button> <button @click="counterSub">-</button> </div> </template> <!--第二种写法：script标签，注意类型必须是text/x-template--> <script type="text/x-template" id="myDiv2"> <div> <!-- 组件动态绑定属性--> <h2>{{title2}}</h2> <p>{{content2}}</p> <p>{{counter2}}</p> <button @click="counterAdd2">-</button> <button @click="counterSub2">-</button> </div> </script> <script src="../js/vue.js"></script> <script> // ■组件不能直接绑定VUE实例的属性数据，只能通过组件内部的data属性来进行动态绑定数据，和methods绑定组件方法 // ■【注册全局组件的语法糖】 // 1、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为组件对象， // 组件对象有一个template属性，属性值为绑定template标签或script标签的id // 同时标签动态绑定数据，需要用到组件对象中的data属性，data属性是一个函数，函数返回数据对象，数据对象里面保存着数据 Vue.component('myDiv1', { // 属性名为要注册组件的名称，随便命名，给组件起一个名字 template: "#myDiv1", //绑定需要注册的组件 data() { // 组件要绑定的数据 return { title1: "我是标题1", content1: "我是内容1", counter: 0 }; }, methods: { //组件绑定的方法 counterAdd() { this.counter++ }, counterSub() { this.counter-- } } }) //■【注册局部组件的语法糖】 const app = new Vue({ el: "#app", data: {}, //■【局部组件的注册方式，只在本实例中才会生效】 // 1、注册组件，components属性，传入对象，对象的属性为组件的名称，值为构造的组件 // 构造的组件有一个template属性，值为要绑定的template标签或script标签的id // 同时标签动态绑定数据，需要用到组件对象中的data属性，data属性是一个函数，函数返回数据对象，数据对象里面保存着数据 components: { myDiv2: { // 属性名为要注册组件的名称，随便命名，给组件起一个名字 template: "#myDiv2", //绑定需要注册的组件 data() { // 组件要绑定的数据 return { title2: "我是标题2", content2: "我是内容2", counter2: 0 } }, methods: { //组件绑定的方法 counterAdd2() { this.counter2++ }, counterSub2() { this.counter2-- } } } } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
效果
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/82674
推荐阅读
相关标签
