如何在父级下访问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以上不会.
随机推荐
- dotnetcore执行shell脚本
我们可以使有dotnetcore跨平台的特性,优雅的实现在dotnetcore执行shell (bash). 代码如下: using System; using System.Collections ...
- 微言Netty：分布式服务框架
1. 前言 几年前,我就一直想着要设计一款自己的实时通讯框架,于是出来了TinySocket,她是基于微软的SocketAsyncEventArgs来实现的,由于此类提供的功能很简洁,所以当时自己实现 ...
- Java开发之使用websocket实现web客户端与服务器之间的实时通讯
使用websocket实现web客户端与服务器之间的实时通讯.以下是个简单的demo. 前端页面 <%@ page language="java" contentType=& ...
- PlayJava Day026
1.泛型:指代任意对象类型 public class CC<T> {} C<Integer> c = new C<Integer>(1) ; 2.限制泛型:用于继承 ...
- 关于 IIS Express 常用设置
关于 IIS Express 常用设置 站点绑定 IIS Express Web 服务器默认只绑定了 localhost 的主机名,这就意味着无法通过内网或其他自定义域名进行访问,可通过如下操作添加其 ...
- axios解决跨域问题（vue-cli3.0）
一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都 ...
- Server基本语句的用法
1.创建数据库 create database databaseName use databaseName go /* 转到指定数据库 */ 2.创建表 create table tableNa ...
- MySQL数据库：数据完整性及约束的应用
数据完整性 1.域完整性:---------匹配完整性:非空.缺省 字段/列 2.实体完整性:-------匹配完整性:主键.唯一键 记录/行 3.引用完整性:-------匹配完整性:外键 表与表之 ...
- 用POI 3.17 导出EXECL
代码参考 https://www.cnblogs.com/bmbm/archive/2011/12/08/2342261.html 效果 导入jar包 <dependency> <g ...
- 从零开始学习java一般需要多长时间？
从零开始学习java一般需要多长时间? 其实学java一般要多久?因人而异,例如一个零基础的小白自学java,每天学习8个小时来算,而且在有学习资料的基础上,每天学习,从零到找到工作,起码要半年起步, ...