如何在父级下访问v-slot的值——vuejs
关于作用域插槽v-slot的用法可以先看看文档
https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
现在我们进入正题
我们用到一个第三方组件validate，这个第三方组件的插槽传了一个属性error值给我们，我们现在想要在父级中获得这个error值, 为了简单起见，我们创建一个validate组件作为测试。
我们觉得可以在v-slot下使用一个方法，把error传到父级去，不就行了吗，的确是可以的： https://jsfiddle.net/jswenjie/pxru6y2m/5/
问题出现
我们的页面有多个validate的情况下，需要搜集所有的error，那么我们可以用个数组：https://jsfiddle.net/jswenjie/pxru6y2m/7/
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app">
<validate v-for="x in 2" :key="x" v-slot="{ error }">
in scope {{ error }} {{ sendToParent(error, x-1) }}
</validate>
<div>in parent {{ error }}</div>
</div>
<script>
// validate为第三方组件不允许修改
Vue.component("validate", {
data() {
return {
error: ""
};
},
mounted: function() {
setInterval(() => (this.error = Date.now()), 1000);
},
template: '<div><slot :error="error" /></div>'
}); new Vue({
el: "#app",
data() {
return {
error: []
};
},
methods: {
sendToParent(error, index) {
this.$set(this.error, index, error);
}
}
});
</script>
</body>
</html>
我们发现虽然结果是正确的，不过在控制台下出现了warning警告，[Vue warn]: You may have an infinite update loop in a component render function. 有死循环的问题。
问题解决
我有一个解决方案（https://javascript.shop/2019/11/get-slot-prop-in-parent-by-v-slot），希望大家不要先看我的方案，可能会影响了大家的思路，因为我感觉我的方案略显复杂。大家是否有更好的解决方案，欢迎评论中告知，多谢。。。
如何在父级下访问v-slot的值——vuejs的更多相关文章
- iframe里访问父级里的方法属性
window.parent.attributeName; // 访问属性attributeName是在父级窗口的属性名 window.parent.Func(); // 访问属性Func()是在父 ...
- js获取iframe和父级之间元素，方法、属，获取iframe的高度自适应iframe高度
摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...
- js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）
第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- ie6下内容会撑开父级设置好的宽高
在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...
- [ActionScript 3.0] flash如何访问父级或者舞台上的变量、函数等的方法
方法一: 进行类型转换,先将root.parent强制转换为MovieClip类型,再进行使用,如下:MovieClip(root).i.MovieClip(this.parent).i.MovieC ...
- IE下 input 的父级标签被 disabled 之后引发的怪异行为
前段时间做了个网盘类的项目,意外发现了这个情况 IE下,将input的父级标签增加 disabled 属性之后,input 的行为变得怪异: 1.input 背景变灰,疑似也被disabled 了. ...
- text-align：center；在ie7下，父级加上会让block状态的子元素居中。
text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.
随机推荐
- 权值初始化 - Xavier和MSRA方法
设计好神经网络结构以及loss function 后,训练神经网络的步骤如下: 初始化权值参数 选择一个合适的梯度下降算法(例如:Adam,RMSprop等) 重复下面的迭代过程: 输入的正向传播 计 ...
- 动态代理模式_应用(Redis工具类)
本次使用动态代理的初衷是学习Redis,使用Java操作Redis时用到Jedis的JedisPool,而后对Jedis的方法进一步封装完善成为一个工具类.因为直接使用Jedis对象时,为了保证性能, ...
- WebAPI + log4net日志 存入数据库
1.首先选择你的项目 打开net管理控制台 输入 install-package log4net 进行安装 也可以 在net包 搜索 log4net 2.安装完之后 在Models文件夹 创建一个L ...
- Sqlite—插入语句(Insert)
SQLite 的 INSERT INTO 语句用于向数据库的某个表中添加新的数据行. 基本语法:INSERT INTO TABLE_NAME VALUES (value1,value2,value3, ...
- java之不同数据流应用举例
按操作单位的不同分为:字节流(8bit)(InputStream.OuputStream).字符流(16bit)(Reader.Writer) 按数据流的流向不同分为:输入流.输出流 按角色的不同分为 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- Nexus-在项目中使用Maven私服，Deploy到私服、上传第三方jar包、在项目中使用私服jar包
场景 Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- 手把手教你安装Virtualbox，安装并运行虚拟机
一.安装VirtualBox. 官网:https://www.virtualbox.org/wiki/Downloads 首先,进入官网下载页面,单击Windows hosts 链接(图中红色方框), ...
- 【Golang基础】defer执行顺序
defer 执行顺序类似栈的先入后出原则(FILO) 一个defer引发的小坑:打开文件,读取内容,删除文件 // 原始问题代码 func testFun(){ // 打开文件 file, ...