slot内容分发

概述

• 通俗地说，slot内容分发要解决的问题就是:
  父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示
• 父组件在子组件内套的内容，默认是不显示的。

<template>
  <div id='parents'>
    <p>我是父组件</p>
    <children>
        <span>子组件内容</span><!--上面这行不会显示-->
    </children>
  </div>
</template>
<script>
  export default {
    components: {
      children: {  
        template: `<p>我是子组件：</p>`
      }
    }
  }
</script>

单个slot

即父组件放在子组件里的内容，插到了子组件的<slot></slot>位置；
注意，即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了<slot></slot>这个标签。

<template>
  <div id='parents'>
    <p>我是父组件</p>
    <children>
        <span>子组件内容</span>
        <span>子组件内容</span>
    </children>
  </div>
</template>
<script>
  export default {
    components: {
      children: {   
        template: `<p>我是子组件：<slot></slot></p>`
      }
    },
  }
</script>

具名slot

将放在子组件里的不同html标签放在不同的位置
父组件在要分发的标签里添加 slot=”name名” 属性
子组件在对应分发的位置的slot标签里，添加name=”name名” 属性，
然后就会将对应的标签放在对应的位置了。

<template>
  <div id='parents'>
    <p>我是父组件</p>
    <children>
        <span slot="first">子组件内容1</span>
        <span slot="second">子组件内容2</span>
    </children>
  </div>
</template>
<script>
  export default {
    components: {
      children: {   
        template: `<p>我是子组件：<slot name="first"></slot>---<slot name="second"></slot></p>`
      }
    },
  }
</script>

分发内容的作用域

被分发的内容的作用域，根据其所在模板决定，例如，以上标签，其在父组件的模板中（虽然其被子组件的children标签所包括，但由于他不在子组件的template属性中，因此不属于子组件），则受父组件所控制。

官方教程是这么说的：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

<template>
  <div id='parents'>
    <p>我是父组件</p>
    <children>
        <span slot="first" @click="show">子组件内容1</span>
        <span slot="second">子组件内容2</span>
    </children>
  </div>
</template>
<script>
  export default {
    components: {
      children: {   
        template: `<p>我是子组件：<slot name="first"></slot>---<slot name="second"></slot></p>`
      }
    },
    methods:{
      show(){
        console.log('我是show方法')
      }
    }
  }
</script>

当没有分发内容时的提示：

假如父组件没有在子组件中放置有标签，或者是父组件在子组件中放置标签，但有slot属性，而子组件中没有该slot属性的标签，那么，子组件的slot标签，将不会起到任何作用。
除非，该slot标签内有内容，那么在无分发内容的时候，会显示该slot标签内的内容。

<template>
  <div id='parents'>
    <p>我是父组件</p>
    <children>
        <span slot="first" @click="show">子组件内容1</span>
    </children>
  </div>
</template>
<script>
  export default {
    components: {
      children: {    //这个无返回值，不会继续派发
        template: `<p>我是子组件：
                                    <slot name="first">如果父组件没定义first的slot，则显示这里的内容</slot>  <br>
                                    <slot name="second">如果父组件没定义second的slot，则显示这里的内容</slot>
                         </p>`
      }
    },
    methods:{
      show(){
        console.log('我是show方法')
      }
    }
  }
</script>