本文详细介绍了Vue中三种插槽的使用：默认插槽用于放置组件内部内容，具名插槽允许在组件中有多个插槽定位，作用域插槽则允许传递数据到子组件并控制渲染。通过示例代码，阐述了如何在模板中定义和使用这些插槽，帮助开发者更好地理解和应用Vue组件的扩展能力。
vue：插槽的分类、使用
- 默认插槽：
<vc1><img ><vc1 />组件中配置一个<slot>，图片显示位置就是该标签的位置 - 具名插槽：有多个插槽，通过slot属性定义，
<vc1 ><slot=’demo’ img ><vc1 />，在需要使用的组件中，<slot name='demo' >， - 作用域插槽：
<template scope='data'> <vc1><img src='data.url'><vc1 /> <template/>，在需要使用的组件中，<slot :data='url' >，需要注意的是必须要用template标签，否则不能收到数据
总结：区别：默认插槽，使用单个slot，具名插槽使用在多个插槽，作用域插槽使用在不同结构，并且数据需要有该组件提供，而不是引入该组件所在的组件提供， scope=‘data’ slot- scope='data’两种写法都可以
扫一扫
5936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
