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>