How to pass ref as prop: [Vue warn]: Invalid prop: type check failed for prop "containerRef". Expected Object, got HTMLDivElement?

Question

I have this template within parent component:

<template>
    <div>
        <div 
            contenteditable
            ref="editorContainer"
        ><editor-content :container-ref="$refs.editorContainer" /></div>
    </div>
</template>

I have this props declaration within "editor-content" component:

props: {
    //...
    containerRef: {
        type: Object,
    }

},

but I get this warning:

[Vue warn]: Invalid prop: type check failed for prop "containerRef". Expected Object, got HTMLDivElement

What should be the type of the ref passing as a prop?

Answer 1

To allow only <div> elements, use type HTMLDivElement.

To allow any element, use type HTMLElement.

To allow anything, set type to null or undefined (that way the linter won't issue a warning).