12.组件 · 程序员开发笔记

[TOC] #### 1.组件之子组件中data使用实例与text-xtemplate的使用方法 <div id="hdcms"> <hd-news></hd-news> <hr> <hd-news></hd-news> <hr> <hd-news></hd-news> </div>  <script type="text/x-template" id="hdNews"> <div> <li v-for="(v,k) in news"> {{v.title}} <button @click="del(k)">删除</button> </li> </div> </script> <script>  var hdNews = { template: "#hdNews", data(){ return { news: [ {title: 'hdcms'}, {title: 'hdphp'} ] }; }, methods: { del(k){ this.news.splice(k, 1); } } }; new Vue({ el: '#hdcms', components: {hdNews}, data: {} }); </script> #### 2.组件之组件间的数据参props的使用实例操作 :lists="news" 父组件向子组件传递数据。 <div id="hdcms"> <hd-news hd="abc" cms="后盾人houdunwang.com" :show-del-button="true" :lists="news"></hd-news> </div> <script type="text/x-template" id="hdNews"> <div> {{hd}}-{{cms}}- {{showDelButton}} <li v-for="(v,k) in lists"> {{v.title}} <button @click="del(k)" v-if="showDelButton">删除</button> </li> </div> </script> <script> var hdNews = { template: "#hdNews", props:['hd','cms','showDelButton','lists'], data(){ return {}; } }; new Vue({ el: '#hdcms', components: {hdNews}, data: { news:[ {title:'hdcms'},{title:'hdphp'},{title:'houdunren.com'} ] } }); </script> #### 3.组件之props数据的多种验证机制实例详解组件hdNews 必须传:show-del-button="true" <div id="hdcms"> <hd-news :show-del-button="true"></hd-news> </div> <script type="text/x-template" id="hdNews"> <div> <li v-for="(v,k) in lists"> {{v.title}} <button @click="del(k)" v-if="showDelButton">删除</button> </li> </div> </script> String Number Boolean Function Object Array <script> var hdNews = { template: "#hdNews", props: { showDelButton: { type: [Boolean, Number], required: true }, // showDelButton: { // validator(v){ // return v===1 || v===0; // }, // }, lists: { type: Array, default(){ return [{title: '后盾人'}] } } }, data(){ return {}; } }; new Vue({ el: '#hdcms', components: {hdNews}, data: { news: [ {title: 'hdcms'}, {title: 'hdphp'}, {title: 'houdunren.com'} ] } }); </script> #### 4.组件之子组件使用$on与$emit事件触发父组件实现购物车功能 <div id="hdcms">  <hd-news :lists="goods" @sum="total"></hd-news> 总计:{{totalPrice}}元 </div> <script type="text/x-template" id="hdNews"> <table border="1" width="90%"> <tr> <th>商品名称</th><th>商品价格</th><th>商品数量</th> </tr> <tr v-for="(v,k) in lists"> <td>{{v.title}}</td><td>{{v.price}}</td> <td> <input type="text" v-model="v.num" @blur="sum"> </td> </tr> </table> </script> <script> var hdNews = { template: "#hdNews", props: ['lists'], methods:{ //子组件修改后通知父组件统计计算。 sum(){ this.$emit('sum'); } } }; new Vue({ el: '#hdcms', components: {hdNews}, mounted(){ //页面加载完成执行统计方法。 this.total(); }, data: { totalPrice:0, goods:[ {title:'iphone7Plus',price:100,num:1}, {title:'后盾人会员',price:200,num:1}, ] }, methods:{ total(){ this.totalPrice=0; this.goods.forEach((v)=>{ this.totalPrice+=v.num*v.price; }) } } }); </script> #### 5.组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理 <div id="hdcms"> <hd-news :lists.sync="goods"></hd-news> 总计:{{totalPrice}}元 </div> <script type="text/x-template" id="hdNews"> <table border="1" width="90%"> <tr> <th>商品名称</th><th>商品价格</th><th>商品数量</th> </tr> <tr v-for="(v,k) in lists"> <td>{{v.title}}</td><td>{{v.price}}</td> <td> <input type="text" v-model="v.num"> </td> </tr> </table> </script> <script> var hdNews = { template: "#hdNews", props: ['lists'] }; new Vue({ el: '#hdcms', components: {hdNews}, computed:{ totalPrice(){ var sum=0; this.goods.forEach((v)=>{ sum+=v.num*v.price; }) return sum; } }, data: { goods:[ {title:'iphone7Plus',price:100,num:1}, {title:'后盾人会员',price:200,num:1}, ] } }); </script> #### 6.组件之使用内容分发slot构建bootstrap面板panel <div id="hdcms"> <form action="" class="form-horizontal"> <bs-panel> <h4 slot="title">hdphp开源框架</h4> <bs-input title="标题" value="后盾人" slot="body"></bs-input> <bs-input title="点击数" value="100" slot="body"></bs-input> abc </bs-panel> </form> </div> <script type="text/x-template" id="bsPanel"> <div class="panel panel-default"> <div class="panel-heading"> <slot name="title"></slot> </div> <div class="panel-body"> <slot name="body"></slot> </div> <h1> <slot></slot> </h1> </div> </script> <script type="text/x-template" id="bsInput"> <div class="form-group"> <label for="" class="col-sm-2 control-label">{{title}}</label> <div class="col-sm-10"> <input type="text" class="form-control" :value="value"> </div> </div> </script> <script> var bsPanel = { template: "#bsPanel" }; var bsInput = { template: "#bsInput", props: ['title', 'value'] } new Vue({ el: '#hdcms', components: {bsPanel, bsInput}, }); </script> #### 7.组件之父组件使用scope定义子组件模板结构实例讲解用户在根组件中修改模版的样式 <div id="hdcms"> <hd-list :data="news"> <template scope="v"> <li> <h1>{{v.field.title}}</h1> </li> </template> </hd-list> </div> <script type="text/x-template" id="hdList"> <ul> <slot v-for="v in data" :field="v"></slot> </ul> </script> <script> var hdList = { template: "#hdList", props:['data'] }; new Vue({ el: '#hdcms', components: {hdList}, data:{ news:[ {title:'hdcms'}, {title:'后盾人'} ] } }); </script> #### 8.组件之使用动态组件灵活设置页面布局 <div id="hdcms"> <div :is="formType"></div> <input type="radio" v-model="formType" value="hdInput"> 文本框 <input type="radio" v-model="formType" value="hdTextarea"> 文本域 </div> <script> var hdInput = { template: "<div><input/></div>", }; var hdTextarea = { template: "<div><textarea></textarea></div>", }; new Vue({ el: '#hdcms', components: {hdInput,hdTextarea}, data:{ formType:"hdTextarea" } }); </script>