How to add the ref for the render function?

Question

How to add the ref for the render function?

I have a custom_modal util for show a custom modal in util.js:

util.custom_modal = function (context ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {

      },[
        h('div', {props: {ref:"abc"}, attrs: {} }, 'ABC')
      ])
    }
  })

when I in a component to use the modal util, the this.$refs do not have the abc ref.

util.custom_modal(this)

in the Browser console I type this.$refs, do not have a abc ref.

In the render function I also put the ref to the attrs:

h('div', {props: {}, attrs: {ref:"abc"} }, 'ABC')

It still not work.

Answer 1

You use ref directly (not as an attribute):

h('div', {props: {}, ref:"abc"}, 'ABC')

Another example, a

<input type="text" ref="foobar">

Would be:

h('input',{ref:"foobar",attrs:{"type":"text"}})

Demo:

new Vue({
  el: '#app',
  data: {},
  render(h) {
    return h('input',{ref:"foobar",attrs:{"type":"text"}})
  },
  mounted() {
    console.log('My foobar input:', this.$refs.foobar);
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="app"></div>