Vue2中的slot组件、slot属性、以及父子组件如何玩（整了半天终于明白了）

slot是插槽的意思，听起来似乎很明白，操作起来总是有问题，关键还是细节！

A、首先你要确保你的代码在你创建的new Vue元素对象作用域内（无意犯的错误！）

B、

 

第一步：首先定义一个自己的组件如：my-slot

const app =  new Vue({
        el:".container", 
        components:{
            "my-slot":{
                template:"#myslot",
                data:function(){
                    return {
                        component:"这是一个局部组件模板",
                    }
                },
            }
        }
});

第二步：html中第一个一个模板#myslot（在组件模板中，把想要插入的元素，通过插槽slot标签写入进来！可以指定插入内容的name属性）；

  <template id="myslot">
          <ol>
              <li>这是一个myslot组件,利用slot切入内容</li>
              <slot name= "kirin2019"></slot>
          </ol>
      </template>

第三步：组件作用域在#container中，在自定义组件  <my-slot>指定slot属性的数据会导入</my-slot>

   <my-slot>
              <p><span>这里没有添加slot属性，所以这里的内容不会插入进去</span></p>
              <ul slot = "kirin2019">
                <li>由于ul标签指定了slot属性，所以旗下的所有标签内容都会自动插入指定名字为kirin2019的插槽中</li>
                <li>这些都会被插入</li>
              </ul>
              <p><span>这里也不会插入</span></p>
          </my-slot>