vue.js - 传入一个有引用值(value)的slot？

Question

在我的组件中，我有这个作用域插槽:

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

在 parent 中我这样做:

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

但是当我稍后尝试在我的组件中访问 ref 时:

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

我不确定。

如何传入一个有引用的槽？

Answer 1

您不能从父组件到子组件访问 refs。

您可以使用 scoped slot在它们之间传递数据。

<!-- 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>

这显然会令人困惑。因此，我建议为 props 使用任何其他合适的名称而不是 ref。