动态组件 插槽

动态组件

<component v-bind:is="currentTabComponent"></component>

绑定is属性做到动态转换组件

但是对于动态组件来讲 完成切换过程中 vue实际进行重新创建一个实例 所以原组件的状态内容不在保有可以用keep-alive解决

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

但是注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

-------------------------

插槽

如果 一个组件已经引入到了html结构中去，如果 其模板中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。 如果添加 了<solt></solt>标签 会将标签中的内容填充到了模板中去了传递给组建的内容会代替solt标签

如下

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
    //可以是自定义标签
  <font-awesome-icon name="user"></font-awesome-icon>
//可以是其他组件
  Your Profile
</navigation-link>

2、

具名插槽： 在单个插槽的基础上添加名字，它允许你在同一个组件中拥有多个插槽 

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
//对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
//在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
//以下是插入到模板中的内容
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
<template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

注意 v-slot 只能添加在一个 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot 特性不同。

------------

3、作用域插槽

子组件可以接收到来自父组件vue的数据 但是插槽内容却无法访问到子组件接收到的数据

解决方案 props原理 将来自子组件的数据依照props规则绑定到插槽属性上去 使得插槽内容可以访问到自组建的数据

如下

//模板
<span>
  <slot>{{ user.lastName }}</slot>
</span>
//想要显示的内容
<current-user>
  {{ user.firstName }}
</current-user>
//解决方法
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
//绑定数据后的处理
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>