javascript - 安装功能性Vue组件时“无法读取未定义的属性'props'”(“Cannot read property 'props' of undefined” while mounting functional Vue component)

Question

Case:

(案件：)

I am trying dynamically mount functional vue component inside custom directive (I need to show special button, when user hovers on some elements on the page).

(我正在尝试在自定义指令内动态安装功能性vue组件（当用户将鼠标悬停在页面上的某些元素上时，我需要显示特殊按钮）。)

I do it in this way, dynamically, because I have thousands of elements on the page, so I try to avoid excess components and try to mount them on the fly, while hovering.

(我以这种方式动态地执行此操作，因为页面上有成千上万个元素，因此我尽量避免多余的组件，并在悬停时尝试将它们动态地挂载。)

Directive code:

(指令代码：)

import AIcon from './ui/AIcon';
let AIconComponent = Vue.extend(AIcon);

editable: {
    bind: (element, binding, vNode) => {
        element.addEventListener('mouseover', () => {
            element.style.position = 'relative';
            let editButtonWrp = htmlToElement(`<div class="btn-wrp"><span class="btn"></span></div>`);
            element.prepend(editButtonWrp);
            new AIconComponent({
                el: editButtonWrp.querySelector('.btn'),
                parent: vNode.context,
                props: {
                    size: 'xs', icon: 'edit',
                },
            });
         });
    }
}

Button functional component code:

(按钮功能组件代码：)

export default {
    functional: true,
    props: {
        icon: {
            type: String,
            default: '',
        },
        size: {
            type: String,
            default: 'md',
        }
    },
    render(createElement, { props }) {
        let iconHref = `/dist/img/sprite.svg#${props.icon}`;
        return createElement('svg', {
            class: { 'a-icon': true, [`-${props.icon}`]: true },
        }, [
            createElement('use', {
                attrs: {
                    'xlink:href': iconHref,
                },
            }),
        ]);
    },
}

But on the page I get this error:

(但是在页面上我得到这个错误：)

TypeError: Cannot read property 'props' of undefined
at Proxy.render (AIcon.js?27d5:19)

As I understand, when I call new AIconComponent({ ... }) in directive, it passes undefind context to render(createElement, { props }) ... but why?

(据我了解，当我在指令中调用new AIconComponent({ ... })时，它将未定义的上下文传递给render(createElement, { props }) ...但是为什么呢？)

How I can resolve this case?

(我如何解决此案？)

  ask by svolkov translate from so

Answer 1

等待大神答复