Vue插槽的简单使用

Vue之slot(插槽)使用

slot的基本使用

1.1slot初识

正常情况下，我们在自定义组件标签中定义的任何内容，都会被抛弃。都只会渲染出组件模板内容。Slot可以把内容渲染进子组件。内容包括文本及标签，如下：

//html
　<div id="box">
    <temp><p>hello world!</p></temp>
</div>

//javascript
 Vue.component('temp',{
        template:`<h2>组件1
       <slot>header</slot>
       </h2>`
    })
    var v=new Vue({
        el:'#box'
    })

页面渲染结果：
　
　当然，slot可以给默认值，直接写在组件定义里面，如果使用组件标签的内部包含别的标签或文本，会覆盖默认值！

1.2具名slot

渲染顺序按照component里面slot的name顺序来渲染页面，无关页面里的组件名template渲染顺序。可以通过template渲染,使用v-slot属性(简写#)，能够按照需求使用组件的部分结构及内容。

//组件定义
   Vue.component('head-com',{
        template:`<p>头部</p>`
    })
    Vue.component('body-com',{
        template:`<p>内容</p>`
    })
    Vue.component('foot-com',{
        template:`<p>底部</p>`
    })
    Vue.component('outer',{
        template:`<div>
        <slot name="head"></slot>
        <slot name="body"></slot>
        <slot name="foot"></slot>
       </div>`
    })
    var v=new Vue({
        el:'#box'
    })

<!--组件使用-->
<div id="box">
    <outer>
       <template #head>  //等价于v-slot:head
            <head-com></head-com>
       </template>
        <template v-slot:foot>
            <foot-com></foot-com>
        </template>
        <template v-slot:body>
            <body-com></body-com>
        </template>
    </outer>
</div>

代码运行结果

注：v-slot:defult与不写slot等价，同时无名slot的内容会默认为组件标签里不加v-slot:名字的剩余部分。如果同时写了多个无名slot，内容就会渲染多次！

1.2.1动态插槽

<!--使用动态插槽-->
<div id="box">
      <temp>
          <template v-slot:[myname]>
              <h1>test</h1>
          </template>
      </temp>
</div>

在vue实例的data中可以修改myname的值,达到动态改变插槽的目的。这里只要修改data里myname的值就能实现temp组件slot的改变。

//定义部分
 Vue.component('temp',{
        template:`<h2>
         <slot name="body">body</slot>
         <slot name="footer">footer</slot>
          <slot name="header"><p>header</p></slot>
        </h2>`
    })
 var v=new Vue({
        el:'#box',
        data:{
            myname:'header'
        }
    })

1.2.2作用域插槽

要使组件里面的插槽能够使用组件本身的data数据,在插槽身上加上绑定一个属性，如：<slot :info=""></slot>，#body=“obj”,obj代表组件在slot里传的数据对象（也就是组件里data的值），如下，obj就是info数组对象。

<div id="box">
      <temp>
          <template #body="obj">
             {{obj}}
              <ul>
                  <li v-for="item in obj.info">{{item}}</li>
              </ul>
          </template>
      </temp>
</div>

//javascript
 Vue.component('temp',{
        template:`<h2>
         <slot name="body" :info="msg"></slot>
        </h2>`,
        data:function(){
            return {
                msg:['实名','注册','登录','盖章'],
            }
        }
    })
    var v=new Vue({
        el:'#box',
        data:{
            myname:'header'
        }
    })

注：v-slot 只能添加在一个<template> 上 ，然后只有一种例外情况。这种例外情况就是：
当只准备向组件的某一个slot渲染内容时，我们可以把v-slot指令写在组件本身上。