美文网首页
vue3中子组件向父组件传值

vue3中子组件向父组件传值

作者: 空我我 | 来源:发表于2022-08-10 15:28 被阅读0次

    需求是上传的图片,会在图片展示区显示,当删除上传图片时,同时也会删除
    子组件upload中
    一定要在这里定义向父组件传递的事件

    const emit = defineEmits(["addImg","delImg"]);
    

    addImg事件

    //上传成功回调
    const handleSuccess = (res, file) => {
      console.log("上传成功", res);
      // console.log("handleSuccessfile", file);
      if (res.code === 1) {
        midArr.value.push(res.mid);
        // 调用父组件事件在图片展示区添加图片
        emit("addImg", res.img_path);
        ElMessage.success({
          message: "上传成功!",
        });
      } else {
        fileList.value.pop();
        ElMessage.error({
          message: "上传失败,请重新上传",
        });
      }
    };
    

    父组件接收

    <upload
          :product_id="data.pid * 1"
          @addImg="addImg"
           @delImg="delImg"
           ref="uploadRef"
    ></upload>
    
    // 上传图片显示在展示区
    const addImg = (imgPath) => {
      imgArr.value = [];
      imgArr.value.push(imgPath);
      product.value = [...imgArr.value, ...product.value];
    };
    

    相关文章

      网友评论

          本文标题:vue3中子组件向父组件传值

          本文链接:https://www.haomeiwen.com/subject/mmkawrtx.html