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代码：

<template>
  <div class="popbox" >
    <!-- 指引区 -->
    <div @click="showpopup" class="popleader">
      <span>{{title}}</span>
      <div  class="popvalbox"><span v-for="item in otherNeeds" :key="item.index">{{item}},</span></div>
      <span class="arrowright"></span>
    </div>
    <div v-show="show" class="popcnt">
        <!-- 按钮 -->
        <div class="popbottons">
          <button @click="cancle" class="cancle">取消</button>
          <button @click="yes" class="yes">确定</button>
        </div>
        <!-- 列表 -->
        <ul class="poplistbox">
          <li v-for="(item,index) in data" :key="index">
            <div v-for="(content,idx) in item" :key="idx" >
              <div v-if="content.value!=''" class="listcnt" >
                <label :for="idx">{{content.name}}</label>
                <input type="checkbox" v-model="otherNeeds" :id="idx" :value="content.value">
                <i class="weui-icon-success-no-circle"></i>
              </div>
            </div>
          </li>
        </ul>
        <!-- mask -->
        <div class="mask" @click="cancle" @touchmove.prevent @scroll.prevent></div>
    </div>
  </div>
</template>

<script>
  import { CheckIcon } from 'vux'   
  export default {
    name:"popup-checkbox",
    props:{
      title:String,
      data:Array,
      // checkedata:String,
    },
    model:{
      // prop:'checkedata',
    },
    data() {
      return {
       otherNeeds:[],
       show:false
      }
    },
    methods:{
      yes:function(){
        // 将this.otherNeeds转为字符串
        let strOther = this.otherNeeds.toString();
        // console.log(strOther);
        // console.log(this.otherNeeds);
        this.$emit("input",strOther);
        this.show = false;
      },
      cancle:function(){
        this.show = false;
      },
      showpopup:function(){
        this.show = !this.show;
      }
    },
    components:{
      CheckIcon
    }
  }
</script>

<style lang="less" scoped>
.popbox{
  position: relative;
  .popleader{
    display: flex;
     100%;
    height: 0.9rem;
    align-items: center;
    .popvalbox{
      flex-grow: 1;
      text-align: right;
      font-size: 15px;
      color: #999;
    }
    .arrowright{
      display: inline-block;
       8px;
      height: 8px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
      border-radius: 2px;
      margin-right: 1px;
    }
  }
  .popcnt{
    background: #fff;
     100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1001;
    .popbottons{
      background: rgba(254, 254, 254, 0.9);
      height: 0.8rem;
      display: flex;
      justify-content:space-between;
      align-items: center;
      button{
        border: none;
        font-size: 0.4rem;
        background: transparent;
        margin: 0 0.2rem;
      }
      .cancle{
        color: #666;
      }
      .yes{
        color: #09BB07;
      }
    }
    .poplistbox{
      z-index: 1002;
      height: 4.8rem;
      background: #fff;
      display: flex;
      align-items: center;
      overflow-y: scroll;
      li{
          background: #fff;
           100%;
        .listcnt{
          height: 0.8rem; 
          line-height: 0.8rem;
          color: #666;
          border-top: 1px solid #ddd;
          position: relative;
        }
        &>div:last-child{
            border-bottom: 1px solid #ddd;
        }
      }
    }
    .mask{
      display: block;
      position: fixed;
      top: 0;
      left: 0;
       100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      transition: opacity 400ms;
      z-index: -1;
    }
  }
}

i{
  display: none;
  position: absolute;
  right: 0;
  top: 7px;
}
label{
  display: inline-block;
   100%;
  text-align: center;
}
input{
  display: none;
}

input[type=checkbox]:checked + i{
 display:inline-block;
}
</style>