Vue 里怎样在 Render 中使用 $refs

欢迎点击关注-前端面试进阶指南：前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的链接

背景：

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

解决思路：

1. 添加vue-DevTools工具，查看$refs属性下是否存在该元素，分析Dom元素存在的位置，进行逐层分解
2. 打印当前render下的this，发现并没有当前元素的相关属性，so: this指向没有问题，但并非是我们的Dom元素
3. 理解Vue.component和render所创建的组件的关系和指向问题，render相当于是在当前的父组件内创建了子组件
4. 解决方式：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工具，逐层进行元素的拆解，证明我们的refs元素是存在的，so：Dom的一种解析加载方式和层级关系就是我们的一个思路点，很多文章归结在this的指向上面，而render的创建和vue.component的关系才是我们的突破点