vue中通过render函数给子组件设置ref

2023-11-13

正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的。

render: (h, params) => {
				        	
	return h(expandRow, {
	    ref:'child',
	    props: {
	        row: params.row
	    }
				
		})    
}
			

我们常见h函数的用法是:

render: (h) => {
    return h(ele)
}

=> 是es6的用法,相当于 (h) => {}  相当于 function(){},上面的代码可解析为:

render: function(createElement) {
    return createElement(ele);
}

Vue在创建Vue实例时,通过render作为函数来渲染Dom树,而在render方法中,又调用createElement函数来渲染子组件或元素。因此此时元素或子组件处于渲染过程。ref是用来给元素或子组件注册引用信息的,引用信息将会注册在父组件的$refs对象上。因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!

解决办法

把h改为创建 this.$createElement

render: (h, params) => {
				        	
	return this.$createElement(expandRow, {
	    ref:'child',
	    props: {
	        row: params.row
	    }
				
		})    
}
				

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中通过render函数给子组件设置ref 的相关文章

随机推荐

  • \t转义字符占几个字节?

    这个问题 在你学习编程过程中可能会考虑到 有时为了字节对齐而使用转义符中 t 但是到底 t占用几个空格呢 下面我们首先通过程序来体验下 然后在总结 include
  • ElasticSearch(7)---倒排索引

    上一篇 ElasticSearch 6 Kibana插件 1 正向索引和反向索引 涉及到索引的概念的时候 首先需要知道 索引可以分为正向索引和反向索引 也可以理解为倒排索引 正向索引 正向索引可以简单理解为从文档到单词 例如现在有4个文档
  • C库函数之memcpy的实现

    C库函数之memcpy的实现 memcpy的实现方式是当满足四字节对齐时 进行四字节的拷贝 不满足时进行单字节的拷贝 例如拷贝10个字节 循环两次拷贝四字节 在循环两次拷贝一字节 void mem memcpy void dst const
  • h5页面加空格常用的几种方法

    1 html table align center border 1px width 200px tr td 姓名 td td 姓名 td tr tr td 姓 nbsp 名 td td 姓 160 名 td tr tr td 姓 ensp
  • 原深感摄像头与face id实现人脸3D扫描和建模(转)

    原文地址 https tech china com article 20170914 2017091459353 html 就在本月13号 苹果在乔布斯剧院高调地召开了2017秋季新品发布会 本场发布会的最大亮点 也是此前外界最期待的 无疑
  • 正确认识H.264与MPEG-4技术产品

    MPEG4的技术规范如下表所示 H 264视频编解码标准被纳入MPEG 4 Part 10标准中 也就是说它只是附属于MPEG 4的第十部分 换句话说 H 264没有超出MPEG 4标准范畴 因此 网上有关H 264标准和视频传输质量高于M
  • errors and 0 warnings potentially fixable with the `--fix` option.

    vue 项目运行过程中出现 3 errors and 0 warnings potentially fixable with the fix option 的错误 报错问题 原因一 在创建vue项目中 会选择linter Formatter
  • 记一次MQ并发消费导致任务状态异常问题

    背景 项目中有一个短信群发任务 例如1次要发送1W条短信 系统会获取任务中每一条短信的MQ并发发送短信 任务默认状态是未发送 状态码 0 需要在这一批任务发送第一条短信的时候 将任务状态修改为发送中 状态码 1 在任务发送结束将状态修改为发
  • 轻量级卷积神经网络的设计技巧

    点击上方 小白学视觉 选择加 星标 或 置顶 重磅干货 第一时间送达 这篇文章将从一个证件检测网络 Retinanet 的轻量化谈起 简洁地介绍 我在实操中使用到的设计原则和idea 并贴出相关的参考资料和成果供读者参考 因此本文是一篇注重
  • networkmanager is not running 网络管理没有运行

    如果确定网卡什么都安装好了 可以下面指令打开 network manager 服务 打开 sudo service network manager start PS network manager 服务 关闭 sudo service ne
  • 基于Linux的人脸识别功能

    前言 需要在翔云平台注册并购买人脸识别服务 通过https协议与个人中心的key和secret 与平台建立连接 说明 使用http协议需要安装libcurl库 而使用https协议需要安装libcurl库选择加入ssl服务 ssl服务依赖于
  • emoji引起的mysql utf-8mb4问题

    场景 在业务中发现备注输入emoji表情后后台系统异常 定位原因发现mysql表不支持此类字符集 mysql版本为5 6 字符集为utf 8 解决 将字符集改为utf 8mb4 报错信息 Incorrect string value xF0
  • 二叉搜索树-红黑树

    前面介绍了AVL树 虽然AVL树将二叉树的高度差保证在1 但是实现的太过复杂 因为要不断调整平衡因子 故而要来介绍另外一个用途比较广的结构 红黑树 红黑树 先来看来红黑树的特性 1 每个节点非红即黑 2 根节点为黑色 3 不能有连续的红节点
  • 智能优化算法——灰狼优化算法(Python&Matlab实现)

    目录 1 灰狼优化算法基本思想 2 灰狼捕食猎物过程 2 1 社会等级分层 2 2 包围猎物 2 3 狩猎 2 4 攻击猎物 2 5 寻找猎物 3 实现步骤及程序框图 3 1 步骤 3 2 程序框图 4 Python代码实现 5 Matla
  • 各大网站镜像源

    可设置maven npm 等等的下载源 1 腾讯镜像源 https mirrors cloud tencent com 2 华为开源镜像站 https mirrors huaweicloud com 3 阿里巴巴开源镜像站 https op
  • 怎样提取一个数的十位个位百位千位

    设一个数为n 则在C语言中其个位 十位 百位 千位依次这样计算zhi n 1 10 n 10 10 n 100 10 n 1000 10 include
  • Fibonacci数列

    题目描述 Fibonacci数列是这样定义的 F 0 0 F 1 1 for each i 2 F i F i 1 F i 2 因此 Fibonacci数列就形如 0 1 1 2 3 5 8 13 在Fibonacci数列中的数我们称为Fi
  • 测试用例(三)需求分析与提取测试点

    一 需求分析 一般由产品经理完成 1 业务需求 关注系统是否满足业务 2 用户需求 关注系统是否满足用户习惯 3 功能需求 关注系统是否满足功能要求 如果没有需求怎么办 参考市面上已经上线的同类产品 如果需求模糊怎么办 收集整理已有的需求
  • ES了解多少?说说你们公司的ES集群架构

    ES了解多少 说说你们公司的ES集群架构 介绍 核心概念 如何保证ES集群架构的安全性 ES的使用场景 介绍 ES 是一个基于Lucene框架的搜素引擎产品 you know for search 提供了Restful风格的操作接口 Luc
  • vue中通过render函数给子组件设置ref

    正常我们的写法是 这样ref不会生效 h是作用在渲染的时候的 而ref是渲染之后才创建的 因此在h函数中使用ref是无效的 render h params gt return h expandRow ref child props row