侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

slot

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 40 阅读 / 1,603 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / Vue / slot
1、具名插槽
有时候我们希望在指定的位置输出我们的子元素,这时候具名插槽就排上了用场。
//组件调用时start
<slot-demo>
 <template v-slot:header>
  //这里v-slot:后边的值与组件内的slot的name属性对应,也就是插槽的名称。
      <div>header-text</div>
  </template>
  <template v-slot:footer>
  //这里v-slot:后边的值与组件内的slot的name属性对应,也就是插槽的名称。
      <div>footer-text</div>
  </template>
</slot-demo>
//组件调用时end
//书写组件时start
<template>
    <div>
     	<div>
            <slot name='header' />
            //这里name的值就是这个插槽的名称, <div>header-text</div>会渲染到这
        </div>
        主体
        <div>
            <slot name='footer' />
            //这里name的值就是这个插槽的名称。<div>footer-text</div>会渲染到这
        </div>
    </div>
</template>
//书写组件时end
最后我们会在我们想要的位置将我们的元素放置。

2、作用域插槽 作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。
//组件调用start
 <ul>
   <slot-demo :userObj="userObj">
	   <template v-slot:footer="message">
	       <div>{{message.userAge}}</div>
	       <div>{{message.userName}}</div>
	       //这里用的message是写组件时在slot标签上定义属性的映射。
	   </template>
   </slot-demo>
 </ul>

data() {
return {
userObj: {
age: 3,
name: '张三',
},
}
},
//组件调用end
//书写组件时start
<template>
<li>
//这里的userObj是组件调用是传下来的prop
<slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
</slot>
</li>
</template>

props: {
userObj: Object,
},

//书写组件时end



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

3、总结 v-slot的出现是为了代替原有的slot和slot-scope 简化了一些复杂的语法。 一句话概括就是v-slot :后边是插槽名称,=后边是组件内部绑定作用域值的映射。 ———————————————— 版权声明:本文为CSDN博主「`、ratel」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/liushijun_/article/details/92186739
0

评论区