解决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实现图片横向滚动效果示例代码
Sep 04 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
js实现下拉框二级联动
Dec 04 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
VSCode搭建Vue项目的方法
Apr 30 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
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程序
2006/10/09 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
初学JavaScript第二章
2008/09/30 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
李培根演讲稿
2014/05/22 职场文书
政府会议通知范文
2015/04/15 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js