父组件中的槽位和引用模板

Question

我在vue 2中遇到了一个问题。基本上我有一个父组件和子组件。基本上我想做这样的事情。

Parent.vue:

<template>
<div>
<Child>
<template #MyComponent>
<slot name="MyComponent" />
</template>
</Child>
<template #MyComponent>
<MyComponent/>
</template>
</div>
</template>

Child.vue:

<template>
<slot name="myComponent"/>
</template>

这可以在value中完成吗?我试过这么做。但它不是指MyComponent提前谢谢。

Answer 1

槽的结构不是这样的。你在<Child>之外调用<template #MyComponent>，并试图在那里做一些事情，这很难理解。

我将假设您尝试将一个名为MyComponent的组件传递到另一个名为Child的组件的插槽中。下面是这种情况下的一个小示例:

// Parent, where you call your Child with myComponent in the slot
<Child>
<template #mySlot>
<my-component></my-component>
</template>
</Child>
// Child
<template>
<div>
<slot name="mySlot"></slot>
</div>
</template>
// myComponent
<template>
<div>
Text from myComponent.vue
</div>
</template>