VUE课程---26、组件
一、总结
一句话总结：
前端组件化开发，可以便于组件的管理和复用。组件可以定义全局组件和私有组件。
1、vue中如何定义全局组件？
直接在全局的 Vue.component 上定义
<mycom1></mycom1> <template id="tmpl"> <div> <h2>template1</h2> <h4>好用,不错!</h4> </div> </template> Vue.component('mycom1', { template: '#tmpl' });
2、vue中如何定义私有组件？
在vue实例的components属性中定义
<login></login> <template id="login"> <div> <h2>这是login组件</h2> </div> </template> components:{ //组件名称，组件对应的模板对象 login:{ // 定义实例内部私有组件的 template: '#login' } }
3、组件如何使用？
用标签名的方式使用组件，例如<login></login>，注意驼峰命名法要写成短线写法，例如myCom要写成my-com
4、为什么组件使用的时候 驼峰命名法要写成短线写法（例如myCom要写成my-com）？
因为html的标签是不区分大小写的
二、组件
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>组件</title> 6 </head> 7 <body> 8 <!-- 9 10 前端组件化开发，可以便于组件的管理和复用。组件可以定义全局组件和私有组件。 11 12 13 2、全局组件和私有组件 14 全局组件 15 16 17 私有组件 18 19 20 3、组件使用 21 <mycom1></mycom1> 22 23 24 --> 25 <div id="app"> 26 <p>{{msg}}</p> 27 <mycom1></mycom1> 28 <my-com2></my-com2> 29 <login></login> 30 </div> 31 32 <template id="tmpl"> 33 <div> 34 <h2>template1</h2> 35 <h4>好用,不错!</h4> 36 </div> 37 </template> 38 <template id="login"> 39 <div> 40 <h2>这是login组件</h2> 41 </div> 42 </template> 43 <script src="../js/vue.js"></script> 44 <script> 45 Vue.component('mycom1', { 46 template: '#tmpl' 47 }); 48 Vue.component('myCom2', { 49 template: '#tmpl' 50 }); 51 let vm = new Vue({ 52 el: '#app', 53 data: { 54 msg: '我有一只小毛驴，我永远也不骑' 55 }, 56 components:{ 57 //组件名称，组件对应的模板对象 58 login:{ // 定义实例内部私有组件的 59 template: '#login' 60 } 61 } 62 }); 63 </script> 64 </body> 65 </html>
