一、基本使用
1. Vue 中使用组件的三大步骤：
- 定义组件（创建组件）
- 注册组件
- 使用组件（写组件标签）
2. 如何定义一个组件？
使用 Vue.extend(option) 创建，其中 options 和 new Vue(options) 时传入的那个 options 几乎一样，但也有点区别：
el 不要写，为什么？ —— 最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器。
data 必须写成函数，为什么？ —— 避免组件被复用时，数据存在引用关系。
备注：使用 template 可以配置组件结构。
3. 如何注册组件？
- 局部组件： 靠 new Vue 的时候传入 components 选项
- 全局注册：靠 Vue.component ('组件名',组件)
4. 编写组件标签
<school></school>
实例：局部注册案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <!-- 第三步：使用组件 --> <school></school> </div> <script> Vue.config.productionTip = false; // 第一步：创建 school 组件 const school = Vue.extend({ template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> `, data(){ return { schoolName: '哔哩哔哩', address: '中国' } }, methods:{ showName(){ alert(this.schoolName) } } }) new Vue({ el:'#app', // 第二步：注册组件(局部注册) components:{ school } }) </script> </body> </html>
实例：全局注册案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <!-- 第三步：使用组件 --> <hello></hello> </div> <hr/> <div id='app2'> <!-- 第三步：使用组件 --> <hello></hello> </div> <script> Vue.config.productionTip = false; // 第一步：创建 hello 组件 const hello = Vue.extend({ template:` <div> <h2>Hello vue!</h2> </div> `, data(){ return { name:'张三' } } }) // 第二步：全局注册组件 Vue.component('hello', hello) // 第一个实例 new Vue({ el:'#app', }) // 第二个实例 new Vue({ el:'#app2' }) </script> </body> </html>
二、几个注意点
1. 关于组件名
一个单词组成：
- 第一种写法(首字母小写)：school
- 第二种写法(首字母大写)：School
多个单词组成：
- 第一种写法( kebab-case 命名)：my-school
- 第二种写法( CamelCase 命名)：Myschool (需要 Vue 脚手架支持)
- 备注：
- 组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2 都不行。
- 可以使用 name 配置项指定组件在开发者工具中呈现的名字。
2. 关于组件标签
- 第一种写法：<school></school>
- 第二种写法：<school/>
备注：不用使用脚手架时，<school/> 会导致后续组件不能渲染。
3. 简写方式
const school = Vue.extend(options) 可简写为： const school = options
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <h2>{{msg}}</h2> <my-school></my-school> </div> <script> Vue.config.productionTip = false; const s = Vue.extend({ name: 'QingHua', template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return{ name: '清华大学', address: '北京' } } }) new Vue({ el:'#app', data:{ msg: 'Hello vue!', }, components:{ 'my-school': s } }) </script> </body> </html>
三、组件的嵌套
1. 把一个组件写入另一个组件，或把多个组件写入一个组件，从而达到嵌套的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <app></app> </div> <script> Vue.config.productionTip = false; // 定义 student 组件 const student = Vue.extend({ name:'student', template:` <div> <h3>学生姓名：{{name}}</h3> <h3>学生年龄：{{age}}</h3> </div> `, data(){ return{ name: '张三', age: 8 } } }) // 定义 school 组件 const school = Vue.extend({ name:'school', template:` <div> <h3>学校名称：{{name}}</h3> <h3>学校地址：{{address}}</h3> <student></student> </div> `, data(){ return{ name: '清华大学', address: '北京' } }, components:{ student } }) // 定义 hello 组件 const hello = Vue.extend({ template:` <h1>{{msg}}</h1> `, data(){ return{ msg: '努力学习vue!' } } }) // 定义 app 组件 const app = Vue.extend({ template:` <div> <hello></hello> <school></school> </div> `, components:{ school, hello } }) new Vue({ el: '#app', components:{ app } }) </script> </body> </html>
四、VueComponent
1. school 组件
本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
2. 我们需要写的是…
<school/> 或 <school></school> ，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options) 。
3. 特别注意
每次调用 Vue.extend，返回的都是一个全新的 VueComponent 。
4. 关于this的指向：
组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是 【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是 【Vue实例对象】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <school></school> <hello></hello> </div> <script> Vue.config.productionTip = false; // 创建组件 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 hello = Vue.extend({ template:` <h2>{{msg}}</h2> `, data(){ return { msg:'你好' } } }) new Vue({ el:'#app', // 注册组件 components:{school,hello} }) </script> </body> </html>
五、一个重要的内置关系
1. 一个重要的内置关系：
VueComponent.prototype.__proto__ = Vue.prototype 。
2. 为什么要有这个关系：
让组件实例对象可以访问到 Vue 原型上的属性、方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <!-- 引入Vue --> <script src="vue.js"></script> </head> <body> <div id='app'> <school></school> </div> <script> Vue.config.productionTip = false; Vue.prototype.x = 99 const school = Vue.extend({ name:'school', //指定组件在开发者工具中呈现的名字 template:` <div> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <button @click="showX">点我输出x</button> </div> `, data(){ return{ name:'清华大学', address:'北京' } }, methods:{ showX(){ console.log(this.x) } } }) new Vue({ el:'#app', components:{ school } }) </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
