2.2 组件的注意点
2.2.1 组件的名称由一个单词组成
组件的名称由一个单词组成时，可以使用首字母大写的写法，这种写法可以与vue的开发者工具相呼应。
<!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"> <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 vm = new Vue({ el: '#root', data: { msg: 'hello world!', }, components: { School: school }, }) </script> </html>
2.2.2 组件的名称由多个单词组成
2.2.2.1 写法一(kebab-case命名)
组件的名称由多个单词组成时，使用短线连接不同单词的写法。此时，组件名要使用引号进行包裹。这种写法vue开发者工具会将不同单词取出每个单词首字母大写进行显示。
<!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"> <my-school></my-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 vm = new Vue({ el: '#root', data: { msg: 'hello world!', }, components: { 'my-school': school }, }) </script> </html>
2.2.2.2 写法二(CamelCase命名)
组件的名称由多个单词组成时，使用每个单词首字母大写的写法，此种写法需要脚手架的环境下使用。
components: { MySchool: school },
<MySchool></MySchool>
组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
2.2.3 组件的name配置项
可以使用name配置项指定组件在开发者工具中呈现的名字。
<!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"> <my-school></my-school> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 创建学校组件 const school = Vue.extend({ name: 'hhhhhhhhhhh', // 组件控制的模板 html template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // 组件控制模板的数据 data() { return { name: 'SGG', address: 'Beijing', } }, }) const vm = new Vue({ el: '#root', data: { msg: 'hello world!', }, components: { 'my-school': school }, }) </script> </html>
2.2.4 创建组件的简写形式
const school = Vue.extend(options) 可简写为： const school = options
const school = options此种写法，在vue的底层会自动调用Vue.extend()
<!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"> <my-school></my-school> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 创建学校组件 const school = { name: 'MySchool', // 组件控制的模板 html template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, // 组件控制模板的数据 data() { return { name: 'SGG', address: 'Beijing', } }, } const vm = new Vue({ el: '#root', data: { msg: 'hello world!', }, components: { 'my-school': school }, }) </script> </html>
2.3 组件的嵌套
注意：被使用的组件需要先定义，组件定义完成后才能进行注册使用。
组件在哪个组件管理的模块使用，就在哪个模块进行注册使用
在开发中，通常会定义一个名为App的组件，用于管理其他全部的组件，而App组件收到vm的管理。
<!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"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // 定义student组件 在school中注册使用 const student = Vue.extend({ name: 'Student', template: ` <div> <h2>姓名: {{name}}</h2> <h2>年龄：{{age}}</h2> </div> `, data() { return { name: 'ZS', age: 18, } }, }) // 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> <hr> <!-- 使用student组件 --> <student></student> </div> `, data() { return { name: 'SGG', address: 'Beijing', } }, components: { // 注册student组件 student, }, }) // 定义hello组件 与school组件平级 const hello = Vue.extend({ name: 'Hello', template: ` <div> <h1>Hello World!</h1> </div> `, }) // 定义app组件用于管理所有的组件 const app = Vue.extend({ name: 'App', template:` <div> <!-- 使用hello与student组件 --> <hello></hello> <school></school> </div> `, components: { // 注册hello与school组件 hello, school, } }) const vm = new Vue({ el: '#root', // 使用app组件 template: `<app></app>`, components: { // 注册App组件 app }, }) </script> </html>
2.4 VueComponent
2.4.1 组件为VueComponent的构造函数
组件本质是一个名为VueComponent构造函数，且不是程序员定义的，是Vue.extend生成的。
在页面中使用了组件，才会进行vue组件实例对象的创建。
// 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { name: 'SGG', address: 'Beijing', } } }) console.log(school)
Vue.extend = function (extendOptions) { /* ...... */ var Sub = function VueComponent (options) { this._init(options); }; /* ...... */ return Sub };
由Vue.extend()的源代码可知，在Vue.extend()内创建了一个VueComponent函数，并将该函数进行了返回。所以组件是一个名为VueComponent构造函数，且是由Vue.extend生成的。
2.4.2 使用组件自动调用new VueComponent()
以school组件为例，我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建 school 组件的实例对象 ，即Vue帮我们执行的：new VueComponent(options)。
修改vue.js中Vue.extend()源代码：
var Sub = function VueComponent(options) { console.log('VueComponent被调用...') this._init(options); };
使用两次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"> <school></school> <school></school> </div> </body> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> --> <script src="../js/vue.js"></script> <script> // 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { name: 'SGG', address: 'Beijing', } } }) console.log(school) const vm = new Vue({ el: '#root', components: { school }, }) </script> </html>
2.4.3 每次创建组件返回全新的VueComponent
每次调用Vue.extend，返回的都是一个全新的VueComponent。
<script> // 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { name: 'SGG', address: 'Beijing', } } }) // 定义hello组件 const hello = Vue.extend({ name: 'Hello', template: ` <div> <h2>Hello World!</h2> </div> ` }) console.log(school) console.log(hello) console.log(hello === school) </script>
