插槽

插槽

插槽的作用在于，为组件开放一个插口，将插入的内容替换到组件内容存留的空间

// <navigation-link>组件内内部

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>


//父级使用 

<navigation-link>
  Your Profile
</navigation-link>

// 插口内容的Your Profile会放至子组件的slot内

<a v-bind:href="url" class="nav-link">
 Your Profile
</a>

//达成这种效果

 

 

 

具名插槽

这是插槽的进一步使用，我们希望将不同的内容放入不同的插口

//<base-layout>组件
<div class="container">
  <header>
    <slot name="header"></slot>//插槽 header
  </header>
  <main>
    <slot></slot>// 插槽 default
  </main>
  <footer>
    <slot name="footer"></slot>//插槽 footer
  </footer>
</div>

 

 

父级使用组件

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

 

 

渲染结果

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

 

 

 

 

作用域插槽

当我们希望在父级影响组件内部数据的显示，就需要使用作用域插槽

//<current-user>组件内部
<span>
  <slot v-bind:user="user">//将数据传递给slot
  </slot>
</span>


//外部
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

//这里的slotProps是什么无所谓，他代指组件内部所有的变量集合体

 

 

 

具名插槽缩写

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>