首页 > 其他 > 详细

Vue中的slot

时间:2019-07-21 19:54:53      阅读:80      评论:0      收藏:0      [点我收藏+]

什么是插槽?

插槽就是在你子组件的模板里可以开辟一个或多个槽,让其他一些内容可以插入进来,称之为插槽。

为什么要使用插槽?

new Vue({
  el:"#app",
  template:`<div>
               <child>我想让这一行字显示出来</child>
            </div>`,
  components:{
    child:{
      template:`<h1>子组件</h1>`
    }
  }
})

我们想在上面的<child></child>标签里面写了一句话,但是发现页面上没有显示出来。
如果你想让他显示出来呢?这时候我们就需要用到插槽了。

插槽分为4点:

1 . 插槽可以插入哪些内容
2 . 匿名插槽
3 . 具名插槽
4 . 作用域插槽



一、插槽可以插入哪些内容

可以是不同种类的节点
new Vue({
  el:"#app",
  template:`<div>
               <child>我是一个</child>
            </div>`,
  components:{
    child:{
      template:`<h1><slot></slot>子组件</h1>`
    }
  }
})
也可以是一个或多个组件
Vue.component('global1',{
  template:`<div>我是一个</div>`
})
Vue.component('global2',{
  template:`<div>没用的</div>`
})

new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <global1></global1>
                  <global2></global2>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1><slot></slot>子组件</h1>`
    }
  }
})




二、匿名插槽

上面的实例中就是匿名插槽 ,也就是这种形式 <slot></slot>



三、具名插槽(分为vue2.6.0版本前和vue2.6.0版本后)两个版本

-----------------#####2.6.0前版本-----------------

第一种写法
new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template slot="header">
                     <h1>2.6.0版本前具名插槽的第一种写法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name='header'></slot>子组件
                </h1>`
    }
  }
})
第二种写法
new Vue({
  el:"#app",
  template:`<div>
               <child>
                    <h1 slot="header">2.6.0版本前具名插槽的第二种写法</h1>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name='header'></slot>子组件
                </h1>`
    }
  }
})



-----------------#####2.6.0后版本-----------------

第一种写法
new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template v-slot:header>
                      <h1>2.6.0版本后具名插槽的第一种写法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header"></slot>子组件
                </h1>`
    }
  }
})
第二种写法
new Vue({
  el:"#app",
  template:`<div>
               <child>
                  <template #header>
                      <h1>2.6.0版本前后具名插槽的第二种写法</h1>
                  </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header"></slot>子组件
                </h1>`
    }
  }
})




四、作用域插槽(分为vue2.6.0版本前和vue2.6.0版本后)两个版本

-----------------#####2.6.0前版本-----------------

new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template slot-scope="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot :myUser="slotProps"></slot>子组件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本前作用域插槽'
        }
      }
    }
  }
})

-----------------#####2.6.0后版本-----------------

没有名字的作用域插槽
new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template v-slot="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot :myUser="slotProps"></slot>子组件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本后没有名字的作用域插槽'
        }
      }
    }
  }
})
有名字的作用域插槽
new Vue({
  el:"#app",
  template:`<div>
               <child>
                      <template v-slot:header="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                  <slot name="header" :myUser="slotProps"></slot>子组件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本后有名字的作用域插槽'
        }
      }
    }
  }
})
一些作用域插槽的写法
new Vue({
  el:"#app",
  template:`<div>
               <child>
                      //匿名作用域插槽(1)
                      <template v-slot="item">
                          {{item.myUser}}
                       </template>
                       //具名作用域插槽(2)
                       <template v-slot:header="item">
                          {{item.myUser}}
                       </template>
                       //简写具名作用域插槽(3)
                       <template #footer="item">
                          {{item.myUser}}
                       </template>
                </child>
            </div>`,
  components:{
    child:{
      template:`<h1>
                   //匿名作用域插槽(1)
                  <slot :myUser="slotProps"></slot>子组件
                  //具名作用域插槽(2)
                  <slot :myUser="slotProps" name="header"></slot>子组件
                  //简写具名作用域插槽(3)
                  <slot :myUser="slotProps" name="footer"></slot>子组件
                </h1>`,
      data(){
        return {
          slotProps:'2.6.0版本后有名字的作用域插槽'
        }
      }
    }
  }
})

Vue中的slot

原文:https://www.cnblogs.com/liu-di/p/11222327.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!