slot内容分发

slot: 位置；狭槽；水沟；硬币投币口 ---from有道词典
个人理解为位置预占， 有新增则覆盖， 无则显示预占内容

一、 默认情况

<template>
  <div id='app'>
    <children>
      <span> i am tangerine </span>
    </children>
  </div>
</template>

<script>
   import Vue from 'vue';
   new Vue({
       components: {
         children: { template: '<p> i am children </p>' }
       }
   }).$mount('#app')
</script>

此时 <span> i am tangerine </span> 不会显示 由于children组件中并未设置插槽。

二、单个slot

<template>
 <div id='app'>
   <children>
     <span> i am tangerine </span>
   </children>
 </div>
</template>

<script>
  import Vue from 'vue';
  new Vue({
      components: {
        children: { template: '<p> i am children<slot><span> i am slot without name </span></slot> </p>' }
      }
  }).$mount('#app')
</script>

此时<span> i am tangerine </span>将替换<slot>整个标签进行渲染 如果无<span> i am tangerine </span>将会显示默认内容<span> i am slot without name </span>

二、具名slot

<template>
  <div id='app'>
    <children>
      <span slot="firstSlot"> i am tangerine </span>
      <span> who am i ? </span>
      <span slot="secondSlot"> i am apple </span>
      <span> who are you ? </span>
      <span slot="firstSlot"> i am orange </span>
    </children>
  </div>
</template>

<script>
   import Vue from 'vue';
   new Vue({
       components: {
         children: { template: '<p> i am children<slot name="firstSlot"><span> i am slot one </span></slot><slot name="secondSlot"><span> i am slot two </span></slot><slot></slot> </p>' }
       }
   }).$mount('#app')
</script>

经测试多个相同slot名的元素将依次插入对应的预占位置，无slot名的元素依次插入无name值的slot位置，即表现为<p> i am children<span> i am tangerine </span><span> i am orange </span><span> i am apple </span><span> who am i ? </span><span> who are you ? </span></p>

三、实例

一个具有默认显示的<Alert>组件
当我们想要有 Success、Warning、Error 等不同样式和不同内容的 alert 时，我们会希望这样使用：

    <Alert type="success">
      <strong>success: </strong> this is some info about success;
    </Alert>
    <Alert type="wraning">
      <strong>wraning: </strong> this is some info about wraning;
    </Alert>
    <Alert type="error">
      <strong>error: </strong> this is some info about error;
    </Alert>

要实现这个功能 具体如下：
Alert.js

<template>
  <div :class="typeClass">
    <slot><strong>default: </strong> this is some info about default; </slot>
  </div>
</template>
<script>
  import Vue from 'vue';
  export default Vue.extend({
    props: [ 'type' ],
    computed: {
        typeClass()
        {
          return `${ this.type||'default' }-alert`
        }
    }
  })
</script>
<style scoped>
    .success-alert{}
    .error-alert{}
    .wraning-alert{}
    .default-alert{}
</style>

app.js

<template>
    <div id="app">
         <Alert></Alert>
         <Alert type="success"> status_success </Alert>
    <div>
</template>

<script>
import Vue from 'vue';
import Alert from 'Alert';

new Vue({
  components: { Alert }
}).$mount('#app')
</script>

四、进阶 - 结合render函数

预知后事如何，且听下回分解