如何在render函数中添加ref？自定义模态框ref无法获取求助

Let's break down the core issue first: when you call util.custom_modal(this), the this you pass is your business component's instance—but the Modal created by context.$Modal.info() is a completely separate component instance. Any refs defined inside the Modal's render function belong to the Modal itself, not your business component. That's why your component's $refs never gets the abc ref, no matter how you define it in the attrs.

Solution 1: Grab the Ref Directly in the Render Function (Recommended) #

Since the ref lives inside the Modal's context, we can use Vue's render function callback for ref to access the element directly, instead of relying on the outer component's $refs. Update your utility function like this:

util.custom_modal = function (context) {
  context.$Modal.info({
    render: (h) => {
      return h('div', {}, [
        h('div', {
          ref: (element) => {
            // The element is available here as soon as it's mounted
            if (element) {
              console.log('Got the ref element:', element);
              // If you need to pass this to your business component, use an event
              context.$emit('modal-ref-ready', element);
            }
          }
        }, 'ABC')
      ])
    }
  })
}

Then in your component, listen for the event to get the element:

util.custom_modal(this);
this.$on('modal-ref-ready', (element) => {
  console.log('Business component received the Modal element:', element);
  // Do whatever you need with the element here
});

Solution 2: Access the Ref via the Modal Instance #

If your UI library (looks like you're using iView, given the $Modal syntax) exposes the Modal instance, you can retrieve the ref from there:

util.custom_modal = function (context) {
  const modalInstance = context.$Modal.info({
    render: (h) => {
      return h('div', {}, [
        h('div', {
          ref: 'abc'
        }, 'ABC')
      ])
    }
  });

  // Wait for the Modal to finish rendering with nextTick
  context.$nextTick(() => {
    const abcElement = modalInstance.$refs.abc;
    console.log('Got ref via Modal instance:', abcElement);
    // Pass it to your component if needed
    context.$emit('modal-ref-ready', abcElement);
  });
}

Key Takeaways #

• Component contexts are isolated: Each Vue component's $refs are private to that instance—you can't reach into a child/independent component's refs from the outside directly.
• Use callbacks or events for cross-component communication: If you need to interact with elements inside a separate component like a Modal, passing references via events or callbacks keeps your code decoupled and follows Vue's best practices.

内容的提问来源于stack exchange，提问作者sof-03