如何在父级下访问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以上不会.
随机推荐
- 网易极客战记官方攻略-地牢-Kithgard 地牢
关卡连接: https://codecombat.163.com/play/level/dungeons-of-kithgard 夺取宝石,逃出地牢--注意不要触碰其他东西.在这个关卡里,你会学习编写 ...
- VMware kali虚拟机环境配置
编译内核 (1)执行命令uname -r以查看内核版本. (2)执行命令apt-cache search linux-headers查看是否安装内核头文件. (3) 如果uname -r出现的内容在 ...
- 【编码】彻底弄懂ASCII、Unicode、UTF-8之间的关系
计算机中的所有字符,说到底都是用二进制的0.1的排列组合来表示的,因此就需要有一个规范,来枚举规定每个字符对应哪个0.1的排列组合,这样的规范就是字符集. ASCII 全称是“美国信息交换标准码”(A ...
- K 折验证
为了在调节网络参数(比如训练的轮数)的同时对网络进行评估,你可以将数据划分为训练集和验证集.但由于数据点很少,验证集会非常小(比如大约100 个样本).因此,验证分数可能会有很大波动,这取决于你所选择 ...
- 从一个OutOfMemoryError 学会了分析Java内存泄漏问题
以前都是好好的,最近出现了 oom. 问题 开始是: java.lang.OutOfMemoryError: Java heap space -- :: --- [nio--exec-] c.e.p. ...
- Java 程序员最喜欢使用的日常工具
多年来,Java 始终是企业应用程序的支柱.最近几年,Java 也是 Android 开发的首选编程语言.不过开发人员如何使用这种语言呢?一项新的研究阐明了主要使用 Java 的开发人员的工作类型,以 ...
- C# ThreadPool 线程池
Thread与ThreadPool Thread: .NetFramework1.0 对线程对象的一个封装 Thread方法很多很强大,但是太过强大,而且没有限制 功能繁多,反而用不好--就像给4岁 ...
- 文件系统之parted 分区
parted分区命令 1.分区表区别 我们 Linux 系统中有两种常见的分区表 MBR 分区表(主引导记录分区表)和 GPT 分区表(GUID 分 区表) MBR 分区表:支持的最大分区是 2TB( ...
- puppeteer开发
Chromium下载问题 https://github.com/GoogleChrome/puppeteer/ https://download-chromium.appspot.com/?platf ...
- mongodb主备配置
前言:mongodb目前推荐的方式是副本集的方式实现,但是副本集需要三台服务器,目前配置为主备方式 假设你已经安装好了mongo,并配置好了响应的用户 下面修改mongodb.conf配置文件,开启认 ...