Pass DOM element to component prop

Hello!
Suppose we have some UploaderComp which is wrapper around some Uploader library.
Uploader library asks for DOM button.

How could I pass element to component props?

Vue.component('UploaderComp', {
  props: {
    // Have to be DOM element
    'uploadBtn': {
      required: true
    }
  },
  data() {
    var uploader = new UploaderLibrary(this.uploaderBtn);
    return { uploader }
  }
} );
<button id="#uploader-btn" ref="uploadBtn">Upload it</button>
...
<uploader-comp v-bind:uploadBtn=" How to pass uploader-btn DOM element here?"></uploader-comp>

I tried to pass $refs.uploadBtn but it is not available on data()

Thanks

Why dont you put your button, within your uploader-comp, avoiding the need to pass dom elements around.

It is just example.
The actual reason is because I have another component (say SidebarComp) which collects buttons. One of this buttons should be uploadBtn, which should be passed to UploaderComp.

Just thoughts. Is it better to use events for communicate between elements (like event bus)?

  1. Inside UploaderComp create invisible button (invisibleUploadBtn) and method clickInvisibleUploadBtn (which triggers click DOM event on invisibleUploadBtn).
  2. Listen in app to SidebarComp uploadBtn click
  3. In app on SidebarComp uploadBtn click do UploaderComp clickInvisibleUploadBtn

Have you ever found out what is the best practice regarding this situation?

I am having exactly the same problem to solve.

Well the quick and easy way would be to give your uploadbutton an id and use document.getelementById('yourUploadButton'), then pass it to the Uploader Lib.

Quite old topic, but I’ve just had the same problem.
The solution I came with was to set the “ref” on the element, set a prop inside my “data” from the parent component, and set this prop inside the “mounted” event. Then I just pass it as prop to the target component.

<template>
    <div>
        <button type="button" ref="target">My Button</button>
        <uploader-comp v-bind:uploadBtn="target"></uploader-comp>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                target: null
            }
        },
        mounted() {
            this.target = this.$refs.target;
        }
    };
</script>

If you want solution fully contained in your uploader component, you can do it like this:

Vue.component('UploaderComp', {
  props: {
    'uploadBtnRefName': {
      type: String,
      required: true
    }
  },
  data() {
    return { 
       uploader: null
    }
  },
  mounted() {
    let me = this
    this.$parent.$on('hook:mounted', function() {
      this.$nextTick(function() {
        me.onParentMountedAndRendered(this, me)
      })
    })
  },
  methods: {
    onParentMountedAndRendered(parent, me) {
       let el = parent.$refs[me.uploadBtnRefName]
       me.uploader = new UploaderLibrary(el);
    }
  }
} );

Both components need to have same parent.
It works but I agree using getElementById is much better and simpler solution…