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>

 

Logo

前往低代码交流专区

更多推荐