vue插槽的分类(vue具名插槽的基本使用实例)
类别:编程学习 浏览量:917
时间:2022-03-29 10:58:58 vue插槽的分类
vue具名插槽的基本使用实例前言
具有名字的插槽slot使用 中的 "name" 属性绑定元素
注意:
1,如果没有匹配到 则放到匿名的插槽中
2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序
vue的匿名插槽(默认插槽)
父组件
<li> <myslot>我是刚刚</myslot> </li>
子组件
<li> <slot><slot> </li>
vue的具名插槽
父组件
<li> <myslot> <template #one>猪猪是一只大肥猫</template> <template #two>通通是一个大屁眼子</template> <template #three>咪咪是没心没肺的小混蛋</template> 我是刚刚 </myslot> </li>
子组件
<li> <slot name="one"></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </li>
渲染出来(大致顺序)即为
vue的作用域插槽
大白话解释作用域插槽:父组件可以通过插槽读到子组件对应插槽所带的数据
父组件
<li> <myslot> <template #oneData="oneData"> <li>{{oneData.one.message}}</li> </template> <template #two>通通是一个大屁眼子</template> <template #three>咪咪是没心没肺的小混蛋</template> 我是刚刚 </myslot> </li>
子组件
<li> <slot name="one" :data='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </li> <script> export default { data() { return { one: { message: '这是子组件所带的数据message', }, }; }, } </script>
代码优化
<li> <myslot> <template #oneData="{oneData}"> <li>{{oneData.message}}</li> </template> <template #two>通通是一个大屁眼子</template> <template #three>咪咪是没心没肺的小混蛋</template> 我是刚刚 </myslot> </li>
子组件
<li> <slot name="one" :oneData='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </li> <script> export default { data() { return { one: { message: '这是子组件所带的数据message', }, }; }, } </script>
总结
到此这篇关于vue具名插槽基本使用的文章就介绍到这了,更多相关vue具名插槽内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
热门推荐
- php怎么实现动态配置(php实现映射操作实例详解)
- mysql数据库事务处理(MySQL数据库事务与锁深入分析)
- nginx反向代理端口号(nginx 代理80端口转443端口的实现)
- 如何查看memcache的状态
- docker配置阿里云镜像(Docker镜像的制作,上传,拉取和部署操作利用阿里云)
- mysql建立分区表指令(MySQL高级特性——数据表分区的概念及机制详解)
- 修改svn服务器地址
- OutOfMemonryException异常的原因
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- elasticsearchwindows分词器配置(docker 部署 Elasticsearch kibana及ik分词器详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9