标签：mes 例子 通用 class 功能 展示 img method func
①组件就是对局部视图的封装，组件（component）可以扩展HTML元素，封装可以重复使用的代码。在较高层面上，组件是自定义元素，vuejs的编译器为它添加特殊功能
②目前主流的前端框架angular，react、vue都是组件化开发思想，vue中的组件思想借鉴于react
③利用组件可以提高开发效率，增强可维护性
①全局组件（通用组件）：一般把网页中特殊的公共部分注册为全局组件，比如轮播图、tab选项卡、分页、通用导航等
<div id="app"> <my-header></my-header> <my-main></my-main> <my-footer></my-footer> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> // 组件的名字,不要使用原生的标签名称 Vue.component(‘my-header‘,{ template:‘<header><h1>头部组件</h1></header>‘ }); Vue.component(‘my-main‘,{ template:` <div> <ul> <li>轮播图</li> <li>产品内容</li> <li>商品展示</li> </ul> </div> ` }); Vue.component(‘my-footer‘,{ template:‘<footer><h1>底部组件</h1></footer>‘ }); new Vue({ el:‘#app‘, data:{ } });
②局部组件（子组件）：一般是注册一些非通用的
<div id="app"> <my-child></my-child> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:‘#app‘, data:{ }, components:{ myChild:{ template:‘<div><h3>子组件</h3></div>‘ }, }, }); </script>
③组件与组件之间是相互独立的：
④组件中的data必须是函数
<div id="app"> <demo></demo> <demo></demo> <demo></demo> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> Vue.component(‘demo‘,{ data:function(){ return{ count:0 } }, template: ‘<button v-on:click="count++">You clicked me {{ count }} times.</button>‘ }); new Vue({ el:‘#app‘, data:{ } }); </script>
标签：mes 例子 通用 class 功能 展示 img method func
原文地址：https://www.cnblogs.com/EricZLin/p/9380176.html
