如何在父级下访问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以上不会.
随机推荐
- Java网络爬虫 HttpClient
简介 : HttpClient是Apache Jakarta Common下的子项目,用于提供高效的,功能丰富的支持HTTP协议的客户编程工具包,其主要功能如下: 实现了所有HTTP的方法 : GET ...
- MongoDB(四)：数据类型、插入文档、查询文档
1. 数据类型 MongoDB支持许多数据类型. 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8. 整型 - 此类型用于存储数值. 整数可以是32位或64位, ...
- 如何修改CAD字体颜色？试试这种方法
CAD中编辑图纸的时候,使用的CAD制图软件来进行绘制,图纸中的CAD字体颜色都是默认的颜色,这样不方便进行查看.这个时候就需要修改CAD字体颜色了,那么如何修改CAD字体颜色呢?具体要怎么来进行操作 ...
- delphi使用Chilkat 组件和库从SFTP下载文件
官网地址:https://www.example-code.com/delphiDll/default.asp 实例代码:(不包括全局解锁) 密码生成器:https://www.cnblogs.co ...
- 字段明明存在，用Web API使用该字段进行查询报错？
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- ESPCMS P8 stable version Front-end reflective xss
Download the source code first In the directory espcms_web\espcms_load.php line 67 if (!is_file($mod ...
- JS高级教程
JS高级教程 JS高级教程
- 【原】导入framework报错解决（以ReactiveObjC.framework为例）
1.当导入ReactiveObjC.framework后,进行编译时报错:framework not found xxx 报错如下图: 解决办法: Targets -> Build Se ...
- Go Modules使用教程
Go Modules 不完全教程 文章转载自公众号 Golang 成神之路 , 作者 L Go Modules 是 Golang 官方最近几个版本推出的原生的包管理方式,在此之前,社区也不乏多种包管理 ...
- SQL Server如何找出一个表包含的页信息（Page)
在SQL Server中,如何找到一张表或某个索引拥有那些页面(page)呢? 有时候,我们在分析和研究(例如,死锁分析)的时候还真有这样的需求,那么如何做呢? SQL Server 2012提供了一 ...