Vue2父组件内能否同时定义插槽和传给子组件的对应插槽模板

首先这种写法不被Vue2支持，无法渲染是因为存在三个明确的代码错误：

• 插槽名大小写不匹配。你在Child组件中定义的插槽名为myComponent，但父组件向Child传递插槽时用的是#MyComponent，Vue2对单文件组件中的插槽名大小写敏感，二者无法匹配，Child无法获取到传入的插槽内容。
• 父组件中单独定义的<template #MyComponent>属于无效代码。<template #xxx>插槽语法只能放在组件标签内部，用于给对应组件传递插槽内容，直接写在父组件根模板下没有对应的宿主组件，Vue会直接忽略这部分内容。
• 插槽使用逻辑错误。父组件内的<slot name="MyComponent" />是用于接收父组件的调用方传入的插槽内容，无法读取当前父组件内定义的内容，你想实现的“自己定义插槽自己消费”的逻辑本身不成立。

根据你的需求，分两种场景提供正确写法：

场景1：仅需要把父组件内部的MyComponent组件传给Child的对应插槽 #

直接将组件写在给Child的插槽内即可，不需要多绕一层插槽：

<!-- Parent.vue -->
<template>
  <div>
    <Child>
      <template #myComponent>
        <MyComponent/>
      </template>
    </Child>
  </div>
</template>

场景2：需要支持插槽透传（父组件的调用方可以自定义插槽内容，默认用MyComponent） #

给父组件的插槽添加默认内容即可：

<!-- Parent.vue -->
<template>
  <div>
    <Child>
      <template #myComponent>
        <slot name="MyComponent">
          <!-- 这里是父组件MyComponent插槽的默认内容，调用方没有传内容时就用这个 -->
          <MyComponent/>
        </slot>
      </template>
    </Child>
  </div>
</template>

建议所有插槽名统一使用 kebab-case 格式（例如my-component），可以彻底避免大小写不匹配的问题。

内容的提问来源于stack exchange，提问作者Ragib