子、父组件的数据传递(实战篇)

做一个selection 组件进行实战。效果图片如下

以下是模拟的data 数据

   data () {
      return {
        buyTypes: [
          {  label: 'java', value: 0 },
          {  label: 'vue',  value: 1 },
          {  label: 'node', value: 2 }
        ]
 　　 }
　　}

以下为子组件伪代码

<!-- 思想：设置一个nowIndex 来判断每次点击的是第几个，然后拿到第几个的数据这样就可以回传给父组件了。
　　selections 组件的伪代码-->
<template>
  <div class="selection-component">
    <div class="selection-show"  @click="toggleDrop" >  <!--监听点击事件显示或者隐藏下拉内容-->
      <span>{{selections[nowIndex].label}}</span> <!--显示选择的内容-->
      <div class="arrow"></div>
    </div>
    <div class="selection-list" v-if="isDrop"> <!--显示隐藏下拉框-->
      <ul>
        <!--循环从父组件传回子组件的数据并循环显示在li中  监听点击事件-->
        <li v-for="(item, index) in selections" @click="chooseSelection(index)">{{ item.label }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      selections: {
        type: Array, //限制子组件只能接受array 类型
        default: [{ //默认一个所有的数据
          label: '所有',
          value: 0
        }]
      }
    },
    data () {
      return {
        isDrop:false,
        nowIndex:0
      }
    },
    methods: {
      toggleDrop () {
        this.isDrop = !this.isDrop
      },
      chooseSelection (index) {
        this.nowIndex = index
        this.isDrop = false
        this.$emit('on-change', this.selections[this.nowIndex]) //像父组件回传点击的数据
      }
    }
  }
</script>

以下为父组件的关键伪代码

//父组件 调用方法监听自定义事件获取子组件回传的参数
  <v-selection :selections="buyTypes" @on-change="getProIndex" ></v-selection>

 methods: {
      getProIndex(value){
         console.log(value) 
       }
    }