今天就跟大家聊聊有关如何在Vue中使用具名插槽,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具有名字的插槽slot使用 中的 "name" 属性绑定元素注意:1,
今天就跟大家聊聊有关如何在Vue中使用具名插槽,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
注意:
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是一款友好的、多用途且高性能的javascript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的html、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
看完上述内容,你们对如何在vue中使用具名插槽有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网精选频道,感谢大家的支持。
--结束END--
本文标题: 如何在vue中使用具名插槽
本文链接: https://www.lsjlt.com/news/277679.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0