Question

在我的组件中，我有这个范围的插槽：

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

在父母中我这样做：

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

显然会让人感到困惑。因此，我建议使用任何其他合适的名称作为道具而不是参考。

传入一个带参考值的插槽？

1 个答案: