在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用mixin合并重复代码的实现
Nov 27 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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 array_flip() 删除数组重复元素
2009/01/14 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JS动画效果代码3
2008/04/03 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
js的写法基础分析
2011/01/17 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue better-scroll插件使用详解
2018/01/25 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python字符串连接方式汇总
2014/08/21 Python
Python实现端口检测的方法
2018/07/24 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
详解django中Template语言
2020/02/22 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
C++:局部变量能否和全局变量重名
2014/03/03 面试题
材料成型及控制工程专业求职信
2014/06/19 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
工地食品安全责任书
2015/05/09 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
python如何正确使用yield
2021/05/21 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android