vue-填坑子父組件傳值

最近接手別人項目，項目中引用了vux這個插件，這個插件怎麼說，還就正如他本身所描述的，差很少的一個插件。

但願達到的目的是，彈出的內容根據父組件的條目得出，且可進行復選，最後將選中的結果傳回給父組件。

如圖所示的目標效果：

　　

因爲，vux並無這個現成的組件，因此，參照他的，作了一個自定義子組件（popup-checkbox）

父組件，father.vue

 template中：

 <popup-checkbox title="其餘" :data="pickerData.Other" v-model="picker.Other"></popup-checkbox>

 script中：

第一步，要引入組件，若是能夠將子組件進行局部引入或者全局引入，我這裏圖快捷，就作的局部引用

第二部，局部引用子組件進行註冊

import PopupCheckbox from '../eplugs/popupcbx'
export default {
	components: {
		PopupCheckbox,//自定義的一個彈出選擇框
	　　　　}
　　　　　　data(){
　　　　　　pickerData{
　　　　　　　　　　other:[]　
}

　　

 pickerData.other爲一個數組Array，是父組件中，經過獲取接口，最後拿到的一個值，將這個值，傳給子組件。

 picker.Other 爲一個字符串String，爲綁定子組件傳過來的值，並將子組件傳過來的值，及時賦給 picker.Other。 

====

子組件，popupcbx.vue

script 中，經過，props，接收父組件傳過來的數據：

props:{
title:String,
data:Array,
}

點擊肯定按鈕，將string類型的數據，傳給父組件

點擊肯定按鈕@click = 「yes」,將選擇好的值傳給父組件。

  this.$emit("input",strOther);  

methods:{
      yes:function(){
        // 將this.otherNeeds轉爲字符串
        let strOther = this.otherNeeds.toString();
        // console.log(strOther);
        // console.log(this.otherNeeds);
        this.$emit("input",strOther);
 
      }

 

附：子組件代碼 popupcbx.vue代碼：

  1 <template>
  2   <div class="popbox" >
  3     <!-- 指引區 -->
  4     <div @click="showpopup" class="popleader">
  5       <span>{{title}}</span>
  6       <div  class="popvalbox"><span v-for="item in otherNeeds" :key="item.index">{{item}},</span></div>
  7       <span class="arrowright"></span>
  8     </div>
  9     <div v-show="show" class="popcnt">
 10         <!-- 按鈕 -->
 11         <div class="popbottons">
 12           <button @click="cancle" class="cancle">取消</button>
 13           <button @click="yes" class="yes">肯定</button>
 14         </div>
 15         <!-- 列表 -->
 16         <ul class="poplistbox">
 17           <li v-for="(item,index) in data" :key="index">
 18             <div v-for="(content,idx) in item" :key="idx" >
 19               <div v-if="content.value!=''" class="listcnt" >
 20                 <label :for="idx">{{content.name}}</label>
 21                 <input type="checkbox" v-model="otherNeeds" :id="idx" :value="content.value">
 22                 <i class="weui-icon-success-no-circle"></i>
 23               </div>
 24             </div>
 25           </li>
 26         </ul>
 27         <!-- mask -->
 28         <div class="mask" @click="cancle" @touchmove.prevent @scroll.prevent></div>
 29     </div>
 30   </div>
 31 </template>
 32 
 33 <script>
 34   import { CheckIcon } from 'vux'   
 35   export default {
 36     name:"popup-checkbox",
 37     props:{
 38       title:String,
 39       data:Array,
 40       // checkedata:String,
 41     },
 42     model:{
 43       // prop:'checkedata',
 44     },
 45     data() {
 46       return {
 47        otherNeeds:[],
 48        show:false
 49       }
 50     },
 51     methods:{
 52       yes:function(){
 53         // 將this.otherNeeds轉爲字符串
 54         let strOther = this.otherNeeds.toString();
 55         // console.log(strOther);
 56         // console.log(this.otherNeeds);
 57         this.$emit("input",strOther);
 58         this.show = false;
 59       },
 60       cancle:function(){
 61         this.show = false;
 62       },
 63       showpopup:function(){
 64         this.show = !this.show;
 65       }
 66     },
 67     components:{
 68       CheckIcon
 69     }
 70   }
 71 </script>
 72 
 73 <style lang="less" scoped>
 74 .popbox{
 75   position: relative;
 76   .popleader{
 77     display: flex;
 78     width: 100%;
 79     height: 0.9rem;
 80     align-items: center;
 81     .popvalbox{
 82       flex-grow: 1;
 83       text-align: right;
 84       font-size: 15px;
 85       color: #999;
 86     }
 87     .arrowright{
 88       display: inline-block;
 89       width: 8px;
 90       height: 8px;
 91       border-top: 2px solid #fff;
 92       border-right: 2px solid #fff;
 93       transform: rotate(45deg);
 94       border-radius: 2px;
 95       margin-right: 1px;
 96     }
 97   }
 98   .popcnt{
 99     background: #fff;
100     width: 100%;
101     position: fixed;
102     bottom: 0;
103     left: 0;
104     z-index: 1001;
105     .popbottons{
106       background: rgba(254, 254, 254, 0.9);
107       height: 0.8rem;
108       display: flex;
109       justify-content:space-between;
110       align-items: center;
111       button{
112         border: none;
113         font-size: 0.4rem;
114         background: transparent;
115         margin: 0 0.2rem;
116       }
117       .cancle{
118         color: #666;
119       }
120       .yes{
121         color: #09BB07;
122       }
123     }
124     .poplistbox{
125       z-index: 1002;
126       height: 4.8rem;
127       background: #fff;
128       display: flex;
129       align-items: center;
130       overflow-y: scroll;
131       li{
132           background: #fff;
133           width: 100%;
134         .listcnt{
135           height: 0.8rem; 
136           line-height: 0.8rem;
137           color: #666;
138           border-top: 1px solid #ddd;
139           position: relative;
140         }
141         &>div:last-child{
142             border-bottom: 1px solid #ddd;
143         }
144       }
145     }
146     .mask{
147       display: block;
148       position: fixed;
149       top: 0;
150       left: 0;
151       width: 100%;
152       height: 100%;
153       background: rgba(0, 0, 0, 0.5);
154       transition: opacity 400ms;
155       z-index: -1;
156     }
157   }
158 }
159 
160 i{
161   display: none;
162   position: absolute;
163   right: 0;
164   top: 7px;
165 }
166 label{
167   display: inline-block;
168   width: 100%;
169   text-align: center;
170 }
171 input{
172   display: none;
173 }
174 
175 input[type=checkbox]:checked + i{
176  display:inline-block;
177 }
178 </style>

View Code