组件的定义：实现应用中局部功能代码和资源的集合
理解：用来实现局部功能效果的代码集合（html、css、js、image）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含一个组件
vue使用组件的三大步骤
1）定义组件 （创建组件）
2）注册组件
3）使用组件（写组件标签）
如何定义一个组件？
使用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>
例子如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> <xuexiao></xuexiao> <hr> <xuesheng></xuesheng> </div> </body> <script type="text/javascript"> const school = Vue.extend({ template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return { schoolName:'gubi', address:'莲溪' } } }) const student = Vue.extend({ template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生名称：{{age}}</h2> </div> `, data(){ return { studentName:'gubi', age:18 } } }) new Vue({ el:'#root', components:{ xuexiao:school, xuesheng:student } }) </script> </html>
几个注意点：
1）关于组件名
一个单词组成
第一种写法 school
第二种写法 School
多个单词组成
第一种写法 my-school
第二种写法 MySchool (需要vue脚手架支持)
备注：
1）组件名尽可能回避html中已有的元素名称，例如：h2,H2都不行、
2）可以使用name配置项指定组件在开发者工具中呈现的名字
2）关于组件标签
第一种写法：<school></school>
第二种写法：<school/> 但是，不使用脚手架的时候，<school/>会导致后续组件不能渲染
3）一个简写方式
const school = Vue.extend(options) 可简写为： const school = options，如下
/* const school = Vue.extend({ template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return { schoolName:'gubi', address:'莲溪' } } }) */ const school = { template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data(){ return { schoolName:'gubi', address:'莲溪' } } }
组件的嵌套
在这里给出一个例子：我们最外层是vm，然后vm之下是app，在app之下套school，套hello，在school之下套学生
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> <app></app> <hr> </div> </body> <script type="text/javascript"> const student = Vue.extend({ template:` <div> <h2>学生姓名：{{name}}</h2> <h2>学生名称：{{age}}</h2> </div> `, data(){ return { name:'gubi', age:18 } } }) const school = Vue.extend({ template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, data(){ return { name:'gubi', address:'莲溪' } }, components:{ student } }) const hello = Vue.extend({ template:` <h1>{{msg}}</h1> `, data(){ return{ msg:'欢迎来到我的世界！' } } }) const app = Vue.extend({ template:` <div> <hello></hello> <school></school> </div> `, components:{ school, hello } }) new Vue({ el:'#root', components:{ app } }) </script> </html>
关于VueComponent
1) school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2）我们只需要写<school/>或 <school></school> vue解析时会帮我们创建school组件的实例对象，即：vue帮我们执行 new VueCompoent(options)
3) 特别注意：每次调用Vue.extend 返回的都是一个全新的VueComponent
4) 关于this指向问题
1）组件配置中：
data函数、methods中的函数、watch函数、computed函数，他们的this均是 【vueComponent实例对象】
2）.new Vue(Options) 配置中
data函数、methods中的函数、watch函数、computed函数，他们的this均是 【vue实例对象】
5）VueComponent的实例对象， 以后简称vc
vue的实例对象 以后简称vm
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> <school></school> <hello></hello> <hr> </div> </body> <script type="text/javascript"> const school = Vue.extend({ template:` <div> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName"></button> </div> `, data(){ return { name:'gubi', address:'莲溪' } }, methods:{ showName(){ console.log(this) } } }) const hello = Vue.extend({ template:`<h2>{{msg}}</h2>`, data(){ return{ msg:'哈哈哈哈哈' } } }) console.log(school===hello) //验证两者是否为同一个vuecomponent console.log(hello) new Vue({ el:'#root', components:{ school,hello } }) </script> </html>
一个重要的内置关系 VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系，让组件实例对象（vc）可以访问到vue原型上的属性和方法
如下例子，我们创建了一个vue.prototype.x对象，然后通过组件进行访问
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> <xuexiao></xuexiao> <hr> </div> </body> <script type="text/javascript"> Vue.prototype.x = 1; const school = Vue.extend({ template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showX">点我显示x信息</button> </div> `, data(){ return { schoolName:'gubi', address:'莲溪' } }, methods:{ showX(){ console.log(this.x) } } }) new Vue({ el:'#root', components:{ xuexiao:school } }) </script> </html>
组件实例
首先，我们创建两个vue单文件组件（student、school）
<template> //组件的结构 <div class="demo"> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> //组件交互相关的代码 export default{ name:'School', //这个可以不定义，作用是： 呈现出来的名字为 School data(){ return { schoolName:'尚硅谷', address:'广州' } }, methods:{ showName(){ alert(this.schoolName) } }, } </script> //组件的样式 <style> .demo{ background-color: orange; } </style>
<template> //组件的结构 <div class="demo"> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> </template> <script> //组件交互相关的代码 export default{ name:'student', //这个可以不定义，作用是： 呈现出来的名字为 School data(){ return { name:'gubi', age:18 } }, } </script> //组件的样式 <style> .demo{ background-color: orange; } </style>
然后，再创建一个组件去管理这两个组件（App）
<template> <div> <School></School> <Student></Student> </div> </template> <script> import School from './School.vue' import Student from './student.vue' export default{ name:'App', components:{ School,Student } } </script> <style> </style>
再创建一个main.js文件去引入之前的App
import App from './App.vue' new Vue({ el:'#root', template::`<App></App>`, components:{App}, })
再创建一个index.html来进行内容的呈现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="root"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script type="text/javascript" src="./main.js"></script> </body> </html>
但是，这样操作之后，控制台会报一个错误
引入脚手架之后，就不会有这样的错误，即;我们要引入脚手架了！
