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