记录Vue中父子组件传值的实战应用

ycyin大约 4 分钟

背景

在vue中只要用到子组件就会涉及到父子组件的传值，以下面这个例子为引导，记录Vue中父子组件的通信传值问题，防遗忘。为了简洁只记录一种最为常用的方式。其它方式可以参考文末的参考文章。

使用vantopen in new window提供的van-popup组件时，默认样式不满足项目需求，需要自定义。我们就对van-popup进行二次封装其中会用到父子组件传值。

父组件给子组件传值

在子组件中定义props，包含父组件要给子组件传递的属性值名称、类型、默认值等。

export default {
  name: "RadioListPicker",
  props: {
    title:{
      type: String,
      default: null
    },
    columns: {
      type: Array,
      default: null
    },
  },
  data(){
    return {
    }
  },
  methods:{

  },
  watch:{

  }
}

当父组件传递过来值后，props中的参数被解析为整个子组件域可用，所以子组件可以直接使用props中的属性即可。

<div class="radio-picker__title van-ellipsis">{{title}}</div>

<van-cell v-for="item in columns" :key="item.key" :title="item.value" @click="handleClick($event,item.key,item.value)"/>

在父组件中使用子组件时传递给它对应的值即可。以下例子

<RadioPicker  :title="title" :columns="data" ></RadioPicker>

这样在父组件中传递给子组件的可变参数title、data子组件使用title、columns可成功接收。

子组件给父组件传值

子组件给父组件传值，需要在父组件使用子组件时定义好回调函数(个人理解,可能描述不准确)，在子组件中使用$emit触发。通过给这个回调函数传递参数即可达到子组件给父组件传值的目的。

以下示例：

父组件：定义子组件会通过$emit触发handleClick和handleClose

<RadioPicker @handleClick="onClick" @handleClose="close"></RadioPicker>

子组件：通过$emit触发handleClick和handleClose,并可以传值

/**
 * 点击Item事件
 */
handleClick(e, key,value){
  this.$emit('handleClick',{key:key,value:value})
},
/**
 * 弹出层关闭时触发@close
 */
close(){
  this.$emit('handleClose')
}

完整实例：

子组件： 是对vant组件库的van-popup组件的进一步封装。添加了顶部toolbar和关闭按钮，底部是一个可以可以点击选择的list列表。

<template>
  <div>
    <van-popup :show="showPopup" round position="bottom" @close="close">
      <van-row class="radio-picker__toolbar">
        <van-col span="16" offset="4">
          <div class="radio-picker__title van-ellipsis">{{title}}</div>
        </van-col>
        <van-col span="4">
          <button type="button"  class="radio-picker__cancel van-haptics-feedback" @click="cancel">
            <van-icon class-prefix="iconfont icon-blue-close"/>
          </button>
        </van-col>
      </van-row>
      <div class="radio-picker__content" :style="'height:'+height+'px'">
        <van-cell v-for="item in columns" :key="item.key" :title="item.value"
                  @click="handleClick($event,item.key,item.value)"/>
      </div>
    </van-popup>
  </div>
</template>

<script>

export default {
  name: "RadioListPicker",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 300
    },
    title:{
      type: String,
      default: null
    },
    columns: {
      type: Array,
      default: null
    },
  },
  data(){
    return {
      showPopup: this.show
    }
  },
  methods:{
    /**
     * 点击Item事件
     */
    handleClick(e, key,value){
      this.$emit('handleClick',{key:key,value:value})
    },
    /**
     * 右上角×点击关闭
     */
    cancel(){
      this.showPopup = false;
    },
    /**
     * 弹出层关闭时触发@close
     */
    close(){
      this.$emit('handleClose')
    }
  },
  watch:{
    /**
     * watch props参数show,及时响应显示与关闭
     */
    show(){
      this.showPopup = this.show
    },

  }
}
</script>

<style lang="less" scoped>
@import "../../less/color";

  .radio-picker__toolbar{
    align-items: center;
    height: 51px;
    background-color: @bgGrayLightColor;

    .radio-picker__cancel{
      height: 100%;
      padding: var(--van-padding-md);
      font-size: var(--van-font-size-md);
      background-color: transparent;
      border: none;
      color: @textBlueColor;
      font-size: 14px;
    }

    .radio-picker__title {
      max-width: 100%;
      font-size: 16px;
      line-height: 51px;
      font-family: @fontFamilyBold;
      font-weight: 600;
      color: @textBlackColor;
    }
  }

  .radio-picker__content{
    height: 300px;
    overflow-y: auto;

    :deep(.van-cell__title){
      font-size:14px;
      font-family: @fontFamilyRegular;
      font-weight: 400;
      color: @textBlackDeepColor;
    }
  }

</style>

父组件： 使用子组件，给子组件传值、接收子组件选择的值。

<template>
  <div class="home">
    <button class="btns" @click="this.showPicker = true">显示单个Picker</button>
    <RadioPicker :show="showPicker" :title="title" :columns="data" :height="300"
                 @handleClick="onClick" @handleClose="close"></RadioPicker>
  </div>
</template>

<script>
import RadioPicker from '../components/common/RadioListPicker.vue'

export default {
  name: 'Home',
  data() {
    return {
      showPicker:false,
      title:"请选择",
      data:[
        {key:1,value:'xxx'}, {key:2,value:'xx'}, {key:10,value:'xxxxxx'},
        {key:14,value:'xxx'}, {key:15,value:'xxxxx'}, {key:16,value:'xxx'},
        {key:4,value:'xxx'},{key:20,value:'xxxxxx'},{key:26,value:'xxxxxxxxxxx'},{key:3,value:'xx'}]
    }
  },
  components: {RadioPicker},
  methods: {
    /**
     * @handleClick处理列表点击事件
     * @param key
     * @param value
     */
    onClick({key,value}){
      this.showPicker = false;
      console.log("父组件接收到值")
      console.log(key,value)
    },
    /**
     * @handleClose处理关闭事件
     */
    close() {
      this.showPicker = false;
    }
  }
}

</script>