[TOC] >[success] # 全局组件 ~~~ 1.局部组件只能在指定创建的Vue对象中使用 2.使用的时候使用components 调用局部组件 ~~~ >[danger] ##### 创建组件步骤 ~~~ 1.定义组件; 2.注册组件; 3.使用组件 ~~~ >[danger] ##### 组件的命名规则 ~~~ 1.注册件名用了 驼峰命 名,则在引用组件的时候,需要把 大写的驼峰改为小写的 字母,同时,两个单词之前,使用 - 链接; 2.如果不使用驼峰,则直接拿名称来使用即可; 3.为什么驼峰不支持因为html不区分大小写 ~~~ >[danger] ##### 意点 ~~~ 1.组件和 Vue 实例类似,基本可以使用其所有内容(data、computed、 methods); 2.与 Vue 实例不同的是,data 是函数,输入需要 return ~~~ >[info] ## 局部组件的写法 ~~~ 1.在创建的vue实例中添加components,在components注册组件 ~~~ >[danger] ##### 局部组件写法 -- components ~~~ <!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> <my-Com2></my-Com2> </div> <!--不属于html 的标签 是vue中组件使用的标签--> <template id="my-com"> <h1>全局组件</h1> </template> <script> // 创建变量对象 let myCom = { template:'#my-com', }; var vm = new Vue({ el: '#app', components:{ // 在外部声明变量,使用代码简洁 myCom, myCom2:{ template:"<h2>组件二号</h2>" } } }); </script> </body> </html> ~~~