vue传参给子组件子组件传参给父级

木毅01

已于 2024-07-17 15:09:59 修改

阅读量37

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2024-07-17 14:23:15 首次发布

本文链接：https://blog.csdn.net/qq_27806371/article/details/140494116

版权

vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

父级页面：
<el-button type="text" style="color: #0080f9" @click="addskuHandle">添加商品</el-button>
<!--子组件部分-->
<addsku
      v-if="addskuVisible"
      ref="addsku"
      @refreshDataList="getDataProduct"
    ></addsku>

import addsku from "./addsku.vue";
export default {
  components: { addsku },
  ...
}

method:
    // 添加商品
    addskuHandle() {
      this.addskuVisible = true;
      this.$nextTick(() => {
        //参数：选中的商品列表/advertiser_id/bc_id/store_id 传参到子组件
        this.$refs.addsku.init(this.productSelection ? this.productSelection : [], this.form.advertiser_id, this.form.bc_id, this.form.store_id);
      });
    },
    // 获取商品  获取子组件返回的参数
    getDataProduct(productSelection) {
      this.productSelection = productSelection   
    },
    ...
}

子组件：
     <el-button type="primary" @click="dataFormSubmit" >确 定</el-button>

methods: {
      //init接收 父级传过来的参数 并且可以调用接口之类的操作
      init(productItem,advertiserId, bcId, storeId){
        this.productSelection = productItem 
        this.selectedGroupIds = this.productSelection.map(item => item.item_group_id);
        this.serchFormf.advertiser_id = advertiserId
        this.serchFormf.bc_id = bcId
        this.serchFormf.store_id = storeId
        this.drawer = true;
        this.getList()
      },

      dataFormSubmit(){//这里把子组件获取到的参数传到父级
        this.$emit("refreshDataList", this.productSelection);
        this.drawer = false;
      },
      ...
}