slot slot-scope v-slot详解

概念

  • slot: 插槽,是Vue提供的一种HTML模版,由子组件提供的一种暴露给父组件的可以传入自定义内容的入口。

  • slot-scope: 作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的template里面写,作用域插槽要求,在slot上面绑定数据。

  • v-slot:新版本slot和 scope-slot 已经被遗弃,v-slot目的就是统一 slot 和 scope-slot。

匿名插槽

slot

<todo-list> 
    任意内容
    <p>我是匿名插槽 </p>
</todo-list>  
子组件 todoList.vue:
<slot>我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

v-slot

父页面:
<todo-list> 
    <template v-slot:default>
       任意内容
       <p>我是匿名插槽 </p>
    </template>
</todo-list>  
//v-slot:default写上感觉和具名写法比较统一,容易理解,也可以不用写
子组件 todoList.vue:
<slot>我是默认值</slot>
##显示##
// 任意内容
// 我是匿名插槽

具名插槽

slot

 //父组件
 
 <template>
     <div>
         我是父组件
         <slot-two>
             <p>啦啦啦,啦啦啦,我是卖报的小行家</p>
             <template slot="header">
             	<p>我是name为header的slot</p>
             </template>
             <p slot="footer">我是name为footer的slot</p>
         </slot-two>
     </div>
 </template>

//子组件slotTwo.vue
<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置(当然也不用必须写到template),没有对应值的其他内容会被放到子组件中没有添加name属性的slot中。

153

v-slot

用v-slot实现上面的功能

//父组件
 <template>
     <div>
     我是父组件
     <slot-two>
         <template v-slot:header>
         	<p>我是name为header的slot</p>
         </template>
         <template v-slot:default>
         	<p>啦啦啦,啦啦啦,我是卖报的小行家</p>
         </template>
         <template  v-slot:footer>
        	<p>我是name为footer的slot</p>
         </template>
     </slot-two>
     </div>
 </template>
//子组件slotTwo.vue
<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

请注意, v-slot 只能添加到 或自定义组件上,这点与弃用的 slot 属性不同 v-slot:的缩写是#
还有就是要么都用v-slot: 要么都用缩写#,不要混合用,要不然只有最后面的才生效

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置(当然也不用必须写到template),没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

显示效果和上面的一样。

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据,那么作用域插槽就排上用场了。

slot-scope

//父组件
<template>
  <div>
    我是作用域插槽
    <slot-four>
      <template slot-scope="users">
        <div v-for="item in users.mydata" :key="item.id">
        {{item}}
        </div>
      </template>
    </slot-four>
  </div>
</template>

slot-scope="users":接取的是子组件标签slot上属性数据的集合所有v-bind:mydata="user"
//子组件slotFour.vue
<template>
  <div>
    我是作用域插槽的子组件
    <slot :mydata="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'slotfour',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

154

v-slot

使用v-slot实现上面相同功能

//父组件
<template>
  <div>
    我是作用域插槽
    <slot-four>
    //<template v-slot:default="user"> 也可以这样写,下面是简写  v-slot 和 v-shot:default 是一样的效果。但当遇到缩写形式时需要显示调用。
      <template v-slot="user">
        <div v-for="item in user.mydata" :key="item.id">
        {{item}}
        </div>
      </template>
    </slot-four>
  </div>
</template>
//子组件slotFour.vue
<template>
  <div>
    我是作用域插槽的子组件
    <slot :mydata="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'slotfour',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×