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

逃离我推掉我的手 2021-09-17 15:28 543阅读 0赞

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>