Vue中的slot，作用域插槽和具名插槽

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、具名插槽

有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。

//组件调用时
<MyFooter v-red :age.sync="age">
　　<template v-slot:footer>
　　//这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
　　<div>list</div>
　　</template>
</MyFooter>
//书写组件时
<template>
　　<div>{age}}
　　　　<div>
　　　　　　<slot name='footer' />
　　　　　　//这里name的值就是这个插槽的名称。
　　　　</div>
　　</div>
</template>

最后我们会在我们想要的位置将我们的元素放置。

2、作用域插槽

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用
 <ul>
   <myli :title="val.title">
   <template v-slot:footer="message">
       <div>{{message.aa}}</div>
   </template>
   </myli>
 </ul>
 //书写组件时
 <template>
    <li>
        <slot name='footer' :aa="title">
        </slot>
    </li>
</template>

注意事项：
这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。

3、总结
v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

以上是 Vue中的slot，作用域插槽和具名插槽 的全部内容， 来源链接： utcz.com/z/378610.html

回到顶部