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')
      ])
    }
  })

当我在组件中使用modal util时，this.$refs没有abc ref。

util.custom_modal(this)

浏览器console中的

我输入this.$refs，没有abc引用。

在渲染功能中，我还将ref放到了attrs：

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"}})

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

如何为渲染函数添加ref？

1 个答案: