首页 > 其他 > 详细

vue中slot的特殊用法

时间:2019-08-05 21:45:38      阅读:170      评论:0      收藏:0      [点我收藏+]

在组件的封装中,我们常常希望组件的复用性更多,这就用到了slot语法,常用的slot语法

1.普通用法

子组件

<slot></slot>

父组件在对应位置写标签

2.利用slot语法获取子组件的值

子组件
<slot name="items" :content=modelContent.data></slot>

父组件
<template #items={content}></template>

接收到子组件传来的值,做不同的渲染构成组件的差异化。

3.利用具名slot实现多处slot语法

子组件
<slot name="item1"></slot>
<slot></slot>
<slot name="item2"></slot>

父组件
<template #item1></template>
<p>11111</p>
<p>22222</p>   
<template #item2></template>

 

 

 

vue中slot的特殊用法

原文:https://www.cnblogs.com/lcglcglcglcglcg/p/11305025.html

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