Vue Render 中使用 $refs 不生效的解决方法

在写某个组件时遇到一个需求,在iview的Modal中的input框需要自动获取焦点

Xnip2020-07-09_10-45-55.jpg

```
代码如下:

left self =this;
self.$Modal.confirm({
    render: (h) => {
       return h('Input', {
         props: {
            value: self.newCommunityName,
            autofocus: true,
            placeholder: '请输入小区名...'
         }
       }
    })
   }
})

这里使用了autofocus: true,但是并没有生效,控制台提示已经有其他输入框有自动获取焦点的属性了
所以希望使用ref获取到节点,然后调用.focus()方法:

      let self = this;
      self.$Modal.confirm({
        render: (h) => {
           return h('Input', {
            ref:'inputEle'
             props: {
               value: self.newCommunityName,
              autofocus: true,
               placeholder: '请输入小区名...'
             }
      })
      self.$nextTick(() => {
        self.$refs.inputEle.focus();
      })

然而还是没有生效,打印$refs.inputEle显示undefined
最后解决如下:

let self = this;
      self.$Modal.confirm({
        render: (h) => {
          let create = self.$createElement;
          let dom = create('Input', {
            ref: 'inputEle',
            props: {
              value: self.newCommunityName,
              // autofocus: true,
              placeholder: '请输入小区名...'
            }
          });
          return dom;
        }
      })
      self.$nextTick(() => {
        self.$refs.inputEle.focus();
      })