component -- 使用全局组件 · Vue&&TypeSprict--基础总结

[TOC] >[success] # 全局组件 ~~~ 1.它们在注册之后可以用在任何新创建的 Vue 根实例全局组件 ~~~ >[danger] ##### 创建组件步骤 ~~~ 1.定义组件； 2.注册组件； 3.使用组件 ~~~ >[danger] ##### 组件的命名规则 ~~~ 1.注册件名用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； 2.如果不使用驼峰,则直接拿名称来使用即可; 3.为什么驼峰不支持因为html不区分大小写 ~~~ >[danger] ##### 难点 ~~~ 1.组件和 Vue 实例类似，基本可以使用其所有内容（data、computed、 methods）； 2.与 Vue 实例不同的是，data 是函数，输入需要 return ~~~ >[info] ## 三种全局组件的写法 ~~~ 1.第一种使用 'Vue.extend' （跟本不用了解） 2.第二种直接使用 'Vue.component' 3.第三种和第二种基本一致，只不过将定义模板提取出来 ~~~ >[danger] ##### Vue.extend -- 基本不用写法 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div> <script> // 创建全局组件 var com = Vue.extend({ template:'<h3>全局组件</h3>' }); // 注册全局组件 Vue.component('myCom',com); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~ >[danger] ##### Vue.component -- 正常使用 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div> <script> // 创建，注册全局组件一步到位 Vue.component('myCom',{ template:'<h1>全局组件</h1>' }); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~ >[danger] ##### 第二种升级版本 -- 提出template ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <my-Com></my-Com> </div>  <template id="my-com"> <h1>全局组件</h1> </template> <script> // 创建，注册全局组件一步到位 Vue.component('myCom',{ template:'#my-com' }); var vm = new Vue({ el: '#app', }); </script> </body> </html> ~~~