there are two child components in the parent component: child component 1 nested child component 2
and child component 1 and child component 2 both have < slot >
result:
1. Sub-component 1 slot does not write name, sub-component 2 slot writes name= "content", and
content can be rendered normally.
2. Subcomponent 1 slot writes name= "panel", subcomponent 2 slot writes name= "content",
can only render the slot contents of subcomponent 1.
3. Sub-component 1 and sub-component 2 slot do not write name,
content can be rendered normally.
I would like to ask why this result occurs.
//1: panel.vue
<template>
<div>
<slot name="panel"></slot>
</div>
</template>
//2 : content.vue
<template>
<div>
<slot name="content"></slot>
</div>
</template>
//
<template>
<panel>
<h1 slot="panel">panel</h1>
<content>
<p slot="content">content
</content>
</panel>
</template>
<script>
import Panel from "@/common/panel"
import Content from "@/common/content"
</script>