如何在 Vue.js 中将实例化的 Vue 组件作为道具传递？

Posted 2023-02-23

【中文标题】如何在 Vue.js 中将实例化的 Vue 组件作为道具传递？

【英文标题】：How to pass an instantiated Vue component as a prop in Vue.js?

【发布时间】：2021-09-07 18:54:26

【问题描述】：

我想将实例化的 Vue 组件作为道具传递给另一个组件，然后渲染它，如下所示：

<Button :icon=<IconComponent size="25" /> :link="http://wikipedia.org">Click here to visit Wikipedia</Button>

这至少是我在 React 中的做法。如何使用 Vue 实现相同的目标？

【问题讨论】：

看看 vuejs 插槽v3.vuejs.org/guide/component-slots.html

谢谢@Tracer69 - 我已经探索过插槽，但它们提供的语法不是我所追求的。我真的想编写我的组件模板，如问题中所示，我不觉得插槽语法可以实现这一点。万一我错过了什么——你能分享一段代码吗？谢谢！

VueJS 不支持你想要的语法，所以你需要使用槽。 slot 语法完全符合您的预期：将内容交织到子组件中。

【参考方案1】：

你需要在子组件中使用命名槽：

<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
 </button>
</template>

在父组件中：

<Button  link="http://wikipedia.org">
 <template #icon>
    <IconComponent size="25" />
 </template>
Click here to visit Wikipedia</Button>