前言 具有名字的插槽slot使用 中的 "name" 属性绑定元素 注意： 1，如果没有匹配到 则放到匿名的插槽中 2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中
具有名字的插槽slot使用 中的 "name" 属性绑定元素
注意：
1，如果没有匹配到 则放到匿名的插槽中
2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序
父组件
<div>
<myslot>我是刚刚</myslot>
</div>
子组件
<div>
<slot><slot>
</div>
父组件
<div>
<myslot>
<template #one>猪猪是一只大肥猫</template>
<template #two>通通是一个大屁眼子</template>
<template #three>咪咪是没心没肺的小混蛋</template>
我是刚刚
</myslot>
</div>
子组件
<div>
<slot name="one"></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
渲染出来（大致顺序）即为
大白话解释作用域插槽：父组件可以通过插槽读到子组件对应插槽所带的数据
父组件
<div>
<myslot>
<template #oneData="oneData">
<div>{{oneData.one.message}}</div>
</template>
<template #two>通通是一个大屁眼子</template>
<template #three>咪咪是没心没肺的小混蛋</template>
我是刚刚
</myslot>
</div>
子组件
<div>
<slot name="one" :data='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
<script>
export default {
data() {
return {
one: {
message: '这是子组件所带的数据message',
},
};
},
}
</script>
代码优化
<div>
<myslot>
<template #oneData="{oneData}">
<div>{{oneData.message}}</div>
</template>
<template #two>通通是一个大屁眼子</template>
<template #three>咪咪是没心没肺的小混蛋</template>
我是刚刚
</myslot>
</div>
子组件
<div>
<slot name="one" :oneData='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
<script>
export default {
data() {
return {
one: {
message: '这是子组件所带的数据message',
},
};
},
}
</script>
到此这篇关于vue具名插槽基本使用的文章就介绍到这了,更多相关vue具名插槽内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: vue具名插槽的基本使用实例
本文链接: https://www.lsjlt.com/news/126607.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0