解决vue同一slot在组件中渲染多次的问题


Posted in Javascript onSeptember 06, 2018

Q:今天写公共组件的时候碰到一个奇葩的情况,slot内部需要再次调用slot,这就会导致同一slot在组件中渲染多次引发的bug

A:把把父组件需要传入的dom结构作为props属性传递给slotRender,保证出来的dom结构不相同(尽管它们都是同一vnode渲染出来的)

解决vue同一slot在组件中渲染多次的问题

定义一个渲染slot的组件

子公共组件调用

解决vue同一slot在组件中渲染多次的问题

解决vue同一slot在组件中渲染多次的问题

父公共组件调用

解决vue同一slot在组件中渲染多次的问题

以上这篇解决vue同一slot在组件中渲染多次的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
javascript中递归的两种写法
Jan 17 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
webpack4简单入门实例
Sep 06 #Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
AngularJS表单验证功能
2017/10/19 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
python语言元素知识点详解
2019/05/15 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
一套Delphi的笔试题二
2013/05/11 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis