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

[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>  <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> ~~~