Question

我正在尝试在b模式中访问子组件的$ refs。

在页面加载时，我可以通过vue开发工具看到尚未创建“ agent-edit”。如果我将组件放在b-modal之外，它确实会显示并且可以访问它-但是我需要将此组件加载到b-modal内。如何访问$ refs.editAgent？我可以强制此子组件与页面一起加载吗？

<b-modal id="editModal" ref="editModal" title="Edit Agent" size="lg">
    <agent-edit ref="editAgent"></agent-edit>
    <div slot="modal-footer" class="w-100"></div>
</b-modal>

Answer 1

对于您而言，this.$refs.editModal.$refs.editAgent应该可以工作。

但是请尝试使用 $ refs 并考虑使用emitting events。

Answer 2

我猜想，当您尝试调用方法时，<agent-edit>中没有<b-modal>。

隐藏模态时，无需渲染子组件。尝试先显示模态，然后 then 访问其子级（甚至可以使用Vue.$nextTick来确保一切都完成了。）

Answer 3

引用是相对于它们在其中创建的组件（而不是子组件）

的

// use this
this.$refs.editAgent

// Not this
this.$refs.editModal.$refs.editAgent

请注意，b-modal默认为lazy，这意味着在显示模式之前，内容不会在文档中呈现（实例化）。

模态完成打开后，您应该可以访问ref（在将它们呈现到DOM中之前，它们不存在）

收听模式事件的shown事件，然后在发出该事件后访问引用。

无法访问b-modal中的子组件$ refs

3 个答案: