在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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue使用element-ui按需引入
May 20 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php 定界符格式引起的错误
2011/05/24 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
javascript中的隐式调用
2018/02/10 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python 基础教程之str和repr的详解
2017/08/20 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
解决python 找不到module的问题
2020/02/12 Python
Pycharm调试程序技巧小结
2020/08/08 Python
前台接待岗位职责
2013/12/03 职场文书
个性发展自我评价
2014/02/11 职场文书
留学经费担保书
2014/05/12 职场文书
婚礼秀策划方案
2014/05/19 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers