CODEWITHSUNDEEP
vue.jsvuejs2
panthro
panthro

Reputation: 24069

Pass in a slot with a reference value?

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?

Upvotes: 4

Views: 3864

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85573

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.

Upvotes: 2

Related Questions