前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. 对组件的理解
1.1 传统方式编写网页
对于传统方式编写网页：
- 实现了代码复用，页面的顶部和底部的css样式以及页面顶部和底部的js实现了代码的复用，但是页面的代码复用率不高，页面的结构代码html没有得到复用。
- 页面的依赖关系混乱，一个页面引入多个css和js，一个css代码和js代码又被多个页面引用，如果此时css代码和js代码之间又存在相互引用，则此时代码间的关系更加混乱，这个情况下代码不利于维护，可能牵一发而动全身。
- 上述图片中js代码实现了模块化。
模块化：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。即将一个庞大的js代码文件，根据需求和功能进行模块的拆分，将一个庞大的js代码文件拆分成多个js代码文件。
模块：向外提供特定功能的 js 程序，一般就是一个 js 文件。
模块的作用：复用 js，简化 js 的编写，提高 js 运行效率。
1.2 组件方式编写页面
对于组件方式编写页面：
- 整个组件，包含html、css、js，都能实现复用，需要某个组件时，只要将对应的组件整个引入即可，提高了代码的复用性。
- 在组件化编程中，各个组件都有属于自己的html、css、js，每个组件之间不会相互影响，不会出现页面的依赖关系混乱，不利于维护的情况。
- 在组件化编程中也可以实现模块化，在一个组件中，也可以将该组件的js代码进行拆分，根据功能和需求拆分多个js代码。
组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。即将一个页面拆分成多个部分(组件)，每个组件都有属于自己的代码和资源，单独编写自己的html、css、js。不同组件间可以进行引用。
组件：用来实现局部功能的代码和资源的集合（html/css/js/image…）
组件的作用：复用编码，简化项目编码，提高运行效率
2. 定义/创建组件
在vue中，组件有两种形式，非单文件组件和单文件组件。
2.1 非单文件组件
非单文件组件：一个文件中包含n个组件。
2.1.1 创建组件
创建组件语法：
const 组件名 = Vue.extend({ // el: '' 在组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 // 组件控制的模板 html template: '', data() { return { k: v, k: v, ... } } })
- 在组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
- 在组件定义时，data配置项一定要写成函数形式。
- 如果写成对象形式，则多个组件都引用了该新组件，则多个组件的页面中的data都是对该新组件中data的引用，一个组件修改了值，另一个组件也会受到影响。
- 如果写成函数形式，则每次都会返回一个新的data对象，不同组件之间不会互相影响。
function data() { return { a: 1, b: 99 } } a = data() b = data()
// 创建学校组件 const school = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // 组件控制模板的数据 data() { return { name: 'SGG', address: 'Beijing' } } }) // 创建学生组件 const student = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>姓名: {{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="age++">点击年龄++</button> </div> `, // 组件控制模板的数据 data() { return { name: 'ZS', age: 18 } } })
2.1.2 注册组件(局部注册)
在vue实例vm中注册组件，使用components配置项。
语法：
new Vue({ el: '#root', components: { 组件使用时的名字: 创建时的组件名, 组件使用时的名字: 创建时的组件名, ... } })
new Vue({ el: '#root', components: { // 组件使用时候的名字和创建时的组件名一致可以简写 创建时的组件名, 创建时的组件名, ... } })
const vm = new Vue({ el: '#root', // 由于只有一个vm，不会出现冲突 // vm的data可以使用对象形式 data: { msg: 'hello world!' }, // 注册组件 // 组件使用时候的名字和组件创建时候的名字一样 components: { school, student }
2.1.3 使用组件
使用组件，只需要在页面中需要使用组件的位置编写对应组件的组件标签即可。
<组件使用时的名字></组件使用时的名字>
<body> <div id="root"> <h1>{{msg}}</h1> <hr /> <school></school> <hr /> <student></student> <!-- 组件的复用 --> <student></student> </div> </body>
2.1.4 页面完整代码
<!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>Document</title> </head> <body> <div id="root"> <h1>{{msg}}</h1> <hr /> <school></school> <hr /> <student></student> <student></student> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 创建学校组件 const school = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // 组件控制模板的数据 data() { return { name: 'SGG', address: 'Beijing', } }, }) // 创建学生组件 const student = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>姓名: {{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="age++">点击年龄++</button> </div> `, // 组件控制模板的数据 data() { return { name: 'ZS', age: 18, } }, }) const vm = new Vue({ el: '#root', // 由于只有一个vm，不会出现冲突 // vm的data可以使用对象形式 data: { msg: 'hello world!', }, // 注册组件 // 组件使用时候的名字和组件创建时候的名字一样 components: { school, student, }, }) </script> </html>
2.1.5 注册组件(全局注册)
// 全局注册school组件 Vue.component('school', school)
<!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>Document</title> </head> <body> <div id="root"> <h1>{{msg}}</h1> <hr /> <school></school> <hr /> <student></student> <student></student> </div> <hr><hr> <div id="root2"> <school></school> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 创建学校组件 const school = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // 组件控制模板的数据 data() { return { name: 'SGG', address: 'Beijing', } }, }) // 创建学生组件 const student = Vue.extend({ // 组件控制的模板 html template: ` <div> <h2>姓名: {{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="age++">点击年龄++</button> </div> `, // 组件控制模板的数据 data() { return { name: 'ZS', age: 18, } }, }) Vue.component('school', school) const vm = new Vue({ el: '#root', // 由于只有一个vm，不会出现冲突 // vm的data可以使用对象形式 data: { msg: 'hello world!', }, // 注册组件 // 组件使用时候的名字和组件创建时候的名字一样 components: { student }, }) new Vue({ el: '#root2' }) </script> </html>
2.1.6 非单文件组件 总结
- Vue中使用组件的三大步骤：
- 一、定义组件(创建组件)
- 二、注册组件
- 三、使用组件(写组件标签)
- 一、如何定义一个组件？
- 使用
Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； - 区别如下：
- 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
- 备注：使用
template可以配置组件结构。
- 二、如何注册组件？
- 1.局部注册：靠
new Vue的时候传入components选项 - 2.全局注册：靠
Vue.component('组件名',组件)
- 三、编写组件标签：
<school></school>
