vue3 ref

<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);
    };

Why do you need to be in vue-cropper Define one in the component ref Attribute?

Because you call the exposed method of this component here ：

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

For in setup How to reference templates in , You can see the official documents ：https://v3.cn.vuejs.org/guide...

Because you call the exposed method of this component here ：

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

For in setup How to reference templates in , You can see the official documents ：https://v3.cn.vuejs.org/guide...