javascript - 如何为渲染函数添加引用？

Question

如何添加渲染函数的引用？

我有一个 custom_modal util，用于在 util.js 中显示自定义模式:

util.custom_modal = function (context ) {

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

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

当我在组件中使用模态 util 时，this.$refs 没有 abc 引用。

util.custom_modal(this)

在浏览器控制台中，我输入this.$refs，没有abc引用。

在渲染函数中，我还将引用放入属性:

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

还是不行。

Answer 1

您直接使用ref(不作为属性):

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

另一个例子，一个

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

将是:

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

演示:

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>