vue3 ref

Question

<vue-cropper
        ref="cropper"
        :src="imgSrc"
        :ready="cropImage"
        :zoom="cropImage"
        :cropmove="cropImage"
        style="width: 100%; height: 400px"
      ></vue-cropper>

const cropper = ref(null);

const setImage = (e) => {
      const file = e.target.files[0];
      if (!file.type.includes("image/")) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        dialogVisible.value = true;
        imgSrc.value = event.target.result;
        cropper.value && cropper.value.replace(event.target.result);
      };
      reader.readAsDataURL(file);
    };

为什么需要在vue-cropper组件里定义一个ref属性呢

Answer 1

因为你在这里调用了这个组件暴露的方法：

cropper.value && cropper.value.replace(event.target.result);

对于在 setup 中如何引用模版，可以看官方文档：https://v3.cn.vuejs.org/guide...