在vue中通过render函数给子组件配置ref操纵

　 短视频，自媒体，达人种草一站处事

这篇文章首要先容了在vue中通过render函数给子组件配置ref操纵，具有很好的参考代价，但愿对各人有所辅佐。一路跟从小编过来看看吧

正常我们的写法是，这样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>
  <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元素层级说明总结：

作者也看了许多几何相同的文章，并没有找到一个公道的办理方法息争析文章

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!