Question

案例：

我正在尝试在自定义指令中动态安装功能vue组件（当用户将鼠标悬停在页面上的某些元素上时，我需要显示特殊按钮）。我以这种方式动态地执行此操作，因为页面上有成千上万个元素，因此我尽量避免过多的组件，并在悬停时尝试将它们动态挂载。

指令代码：

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',
                },
            });
         });
    }
}

按钮功能组件代码：

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,
                },
            }),
        ]);
    },
}

但是在页面上我收到此错误：

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

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

安装功能性Vue组件时“无法读取未定义的属性'props'”

0 个答案: