Vue中自定义组件向父组件传值

此处使用的是$emit方法,点击按钮会通过自定义Apply()方法,把对应的数据传给父组件

子组件方法定义

			<div slot="header" class="clearfix">
              <span style="float: left; padding: 2px 0">{{ item.name }}span>
              <el-button
                style="float: right; padding: 2px 0"
                type="text"
                @click="Apply(item.name)"
                >申请加入el-button
              >
            div>

子组件方法传值

methods: {
    Apply(name) {
      this.$emit('Apply', name);
    },
  },

父组件调用

<left-image-card :clubList="clubListData" @Apply="ApplyClub" />

父组件接受方法

 ApplyClub(name) {
      this.ApplyModule.deptName = name;
      console.log(this.ApplyModule.deptName);
    },

结果:
在这里插入图片描述

你可能感兴趣的:(vue,vue)