Vue.js中使用createElement设置ref属性无效果问题求助

嘿，这个坑我之前踩过！你之所以在组件的$refs里找不到设置的ref，核心原因是：在组件自身的render函数中给根DOM元素设置的ref，并不会被注册到组件自己的$refs对象中。

Vue的ref机制设计是这样的：组件模板（或render函数）里定义的ref，默认是给父组件用来访问子组件/内部元素的，而组件自己要访问内部根元素，根本不需要用ref——Vue已经给每个组件实例提供了$el属性，它直接指向组件的根DOM节点。

具体解决方案 #

方案1：直接使用this.$el（推荐） #

这是最简单直接的方式，如果你只是想访问这个根div元素，完全不需要额外设置ref，在组件的mounted钩子（或之后的生命周期）里直接用this.$el就能拿到它：

Vue.component('sm-form-row', {
  mounted() {
    console.log(this.$el); // 这里就是你要的那个带row类的根div
  },
  render: function (createElement) {
    return createElement('div', {
      class: { 'row': true }
    });
  }
});

方案2：嵌套容器实现内部ref（如果需要多个内部元素的ref） #

如果你的组件内部有多个元素，必须用ref来区分，那可以给根元素套一个无意义的外层容器（比如空div，不会影响布局），然后给目标元素设置ref，这样组件自己的$refs就能正常获取到它了：

Vue.component('sm-form-row', {
  mounted() {
    console.log(this.$refs.row); // 现在能正确拿到目标div了
  },
  render: function (createElement) {
    // 外层加一个容器，内部的目标元素设置ref
    return createElement('div', [
      createElement('div', {
        class: { 'row': true },
        ref: 'row' // 这里的ref会被注册到组件自身的$refs中
      })
    ]);
  }
});

额外注意点 #

如果你原本的ref值是动态计算的（比如你注释里写的“some computed value”），要确保这个值是字符串类型，并且在render执行时是稳定存在的，不过这不是你当前$refs为空的主要原因。

内容的提问来源于stack exchange，提问作者Storm