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


Posted in Vue.js onNovember 17, 2020

正常我们的写法是,这样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
   }
  
 })  
}

补充知识:Vue 里怎样在 Render 中使用 $refs

背景:

使用 element-ui 组件,发现el-popover组件有一个方法: doClose();调用方法为:this.refs[name].doClose();经过测试正常使用是没问题的。现在想要在组件内的render函数中调用,一直获取不到this.refs[name].doClose();经过测试正常使用是没问题的。

现在想要在组件内的render函数中调用,一直获取不到this.refs[name].doClose();经过测试正常使用是没问题的。现在想要在组件内的render函数中调用,一直获取不到this.refs[name],报undefined

解决思路:

添加vue-DevTools工具,查看$refs属性下是否存在该元素,分析Dom元素存在的位置,进行逐层分解

打印当前render下的this,发现并没有当前元素的相关属性,so: this指向没有问题,但并非是我们的Dom元素

理解Vue.component和render所创建的组件的关系和指向问题,render相当于是在当前的父组件内创建了子组件

解决方式:this.$refs[父组件ref名].refs[子组件ref名]+方法属性

代码结构:

// 父组件TableList内的属性
<template>
 <el-card class="auto-schedu-class">
  <TableList border ref="TableList" :columns="columns(this)" />
 </el-card>
</template>
 
<script>
const columns = that => [
 {
  render: (h, parmas) => {
   return h(
    "el-popover",
    {
     ref: "popover",
     props: {
      placement: "top",
      width: "160"
     }
    },
    [
     h("p", "当前规则生效中,是否确认删除?"),
     [
      h(
       "el-button",
       {
        props: {
         type: "text",
         size: "mini"
        },
        on: {
         click: row => {
          console.log(this, "-------------");
          that.handleDeleteRow(row);
         }
        }
       },
       "取消"
      ),
      h(
       "el-button",
       {
        props: {
         type: "text",
         size: "mini"
        }
       },
       "确定"
      )
     ],
     h(
      "el-button",
      {
       props: {
        type: "text",
        size: "mini"
       },
       slot: "reference"
      },
      "删除"
     )
    ]
   );
  }
 }
];
export default {
 data() {
  return {
   columns
  };
 },
 methods: {
  handleDeleteRow(row) {
   console.log(this, "=======");
   this.$refs.TableList.$refs.popover.doClose(); // 获取到子组件内的属性方法
  }
 }
};
</script>

vue-DevTools元素层级分析总结:

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

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

作者也看了好多类似的文章,并没有找到一个合理的解决方式和解析文章

通过我们的vue工具,逐层进行元素的拆解,证明我们的refs元素是存在的,so:Dom的一种解析加载方式和层级关系就是我们的一个思路点,很多文章归结在this的指向上面,而render的创建和vue.component的关系才是我们的突破点

以上这篇在vue中通过render函数给子组件设置ref操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
vue使用vant中的checkbox实现全选功能
Nov 17 #Vue.js
vue+vant实现购物车全选和反选功能
Nov 17 #Vue.js
vue+iview分页组件的封装
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
浅析PHP水印技术
2007/02/14 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python对Excel的读取的示例代码
2020/02/14 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
毕业生党员个人总结
2015/02/14 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis