在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新手入门指导教程
Nov 18 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
Linux中为php配置伪静态
2014/12/17 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
简单的js表格操作
2016/09/24 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
过滤器的用法
2013/10/08 面试题
2015年结对帮扶工作总结
2015/05/04 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
python 命令行传参方法总结
2021/05/25 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
redis数据一致性的实现示例
2022/03/18 Redis
Golang数据类型和相互转换
2022/04/12 Golang