Vue.js-命名插槽

我有一个关于命名槽的初学者问题。在我的示例中，我只想显示第一个插槽的内容，但除非我在不使用

name=“first”

的情况下使用

，否则它不会工作。我的例子怎么了

Vue.component（'user-name'{
道具：['name']，
模板：`
Hi{{{name}
`
});
Vue.component（'用户昵称'{
道具：['name']，
模板：`
Byee{{name}
`
});
Vue.组件（“用户信息”{
模板：`
`,
});
新Vue({
el:“应用程序”
});
正文{
宽度：700px；
保证金：0自动；
文本对齐：居中；
颜色：蓝色；
}
.用户信息{
背景：红色；
宽度：700px；
高度：200px；
}

从组件中删除
slot=“…任何…”
。然后在
用户信息
中添加第二个命名插槽。最后，在主引用中，将插槽作为子组件的父级

<user-information>
    <template v-slot:first>
        <user-name name="Foo"></user-name>
    </template>
    <template v-slot:second>
        <user-nickname name="Boo"></user-nickname>
    </template>
</user-information>