vue.js - Vue.js-命名插槽

Question

我有一个关于命名槽的初学者问题。在我的示例中，我只想显示第一个广告位的内容，但是除非我使用不带<slot></slot>的name="first"，否则它不起作用。我的例子有什么问题？

Vue.component('user-name', {
  props: ['name'],
  template: `
  	     <p slot="first">Hi {{ name }}</p>
            `
});

Vue.component('user-nickname', {
  props: ['name'],
  template: `
             <p slot="secont">Byee {{ name }}</p>
            `
});

Vue.component('user-information', {
  template: `<div class="user-information">
	         <slot name="first"></slot>								
              </div>
             `,
});

new Vue({
  el: "#app"
});

body{
  width:700px;
  margin:0 auto;
  text-align:center;
  color: blue;
  
}

.user-information {
  background: red;
  width: 700px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <user-information>
      <user-name name="Foo"></user-name>
      <user-nickname name="Boo"></user-nickname>
    </user-information>
</div>

Answer 1

从您的组件中删除slot="..whatever.."。然后在user-information中添加另一个命名的插槽。最后，在您的主要引用资料中，将插槽作为子组件的父级

<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>