Pass in a slot with a reference value?

Question

In my component I have this scoped slot:

<slot name="test">
    <input ref="inputTest">
</slot>

In the parent I do this:

<div slot="test">
    <input ref="inputTest">
</div>

But when I tried to access the ref later in my component:

console.log(this.$refs.inputTest);

I get undefined.

How can I pass in a slot that has a reference?

Answer 1

You can't access refs from parent component to child component.

You can use scoped slot to pass the data between them.

<!-- pass ref as props -->
<slot name="test" :ref="inputTest">
    <input ref="inputTest">
</slot>


<!-- receive ref props -->
<template slot-scope="ref">
    <!-- bind ref to $refs -->
    <input ref="ref">
</div>

It will be confusing obviously. Thus, I would recommend to use any other suitable name for the props instead of ref.