Vue中的插槽

插槽是什么？
插槽用于自定义子组件中的部分内容，可以在子组件中通过<slot>标签来定义一个插槽，在父组件使用子组件时，在子组件两个标签中写入用来替换子组件插槽的内容即可。
示例:

<div id="app"></div>
<script type="text/javascript">
  const child ={
    
    template:`
        <div>
          <div>我是子组件</div>
          <slot>我是子组件中的插槽</slot>
        </div>`
  }
  new Vue({
    
    el:"#app",
    template:`<div>
        <div>我是父组件</div>
        <cpn>
          <div>我用来替换插槽中的内容</div>
        </cpn>
    </div>`,
    components: {
    
      'cpn': child
    },
  })
</script>

匿名插槽和具名插槽
插槽分为匿名插槽和具名插槽，具名插槽在定义时有name属性，如：<slot name=“slot01”></slot>，而匿名插槽在定义时没有写明name属性。注意：一个不带 name的 slot 出口会带有隐含的名字“default”。
在父组件中使用子组件时，想要替换具体名称的插槽时，需要给用来替换的标签中加一个slot属性，并使该属性的值和子组件中插槽的名字相对应即可。如果用于替换插槽的标签没有slot属性，则都会被用于替换子组件中的默认插槽的内容（name为default的插槽）。
大家可以探讨一下以下示例中子组件的插槽会被哪些内容替换呢？
示例：

<div id="app"></div>
<script type="text/javascript">
  const child ={
    
    template:`
        <div>
          <div>00000子组件的开头00000</div>
          <div>111111111111111111111111111111</div>
          <slot>我是匿名插槽</slot>
          <div>1111111111