Dynamic Component Slot

Dynamic Components

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

Binding is a dynamic property to do the conversion assembly

However, in terms of the dynamic components of the actual completion of the handover process vue recreate an instance of the component so that the original state of the content can not maintainkeep-alive解决

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

But note that this  <keep-alive> requirement is switched to the components has its own name , whether through the component  name registration options or local / global.

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

Slot

If a component has been introduced into the structure to html, if the template which does not contain an  <slot> element, then anything between the start tag and an end tag assembly is discarded. If you add a <solt> </ solt> tag content labels will populate the template to go to the pass to set up the contents of the tag will be replaced solt

as follows

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

Named Slot: Add a name on the basis of a single slot, which allows you to have multiple slots in the same assembly 

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

Now  <template> all the content elements will have to be passed in the appropriate slot. Not wrapped in with any  v-slot of  <template> be considered a default slot content in the content will be.

Note that  v-slot you can only add one  <template> on  (only one exception ), and it has been abandoned  slot properties different.

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

3. Scope slot

Subassemblies can receive data from the parent component vue slot content but can not access to the data received by the subassembly

Solutions props principle data from the sub-assembly is bound to the slots property in accordance with the rules props up so that content can be accessed from the slot formed Data

as follows

//模板
<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>