Question

前提

让我们在组件中假设我们有这样的模板：

<div id="my-component-1"></div>

并且组件注册为my-component。

问题

是否有可能从组件内部编译那种id？理想情况下，我想要一个支持id的mixin，默认为component_name + '-' + unique_id。

实施例

HTML

<my-component></my-component>
<my-component></my-component>
<other-component></other-component>
<other-component></other-component>

编译html

<div id="my-component-1"></div>
<div id="my-component-2"></div>
<div id="other-component-3"></div>
<div id="other-component-4"></div>

感谢您的决心。

Answer 1

行为不一致

正在进行的解决方案不能像预期的那样发挥作用。有时它工作得很好。其他时间它会产生vue和vue-component而不是my-component。

以下是适用于我的mixin：

Vue.mixin({
    props: {
        id: {
            default: function() {
                var component_name = _.kebabCase(this.constructor.name);

                if (component_name.substring(0, 3) === 'vm-')
                component_name = component_name.substring(3)

                return component_name + '-' + this._uid
            },
        },
    }
});

这就是它的作用：

未编译：{{1}}

已编译：{{1}}

模板：<vm-my-component></vm-my-component>

此方法适用于<div id="my-component-1"></div> / <div :id="id"></div>版本。并且不适用于browserify的CDN版本。查看fiddle了解详情。

如果有人在webpack / AMD上测试了这个方法 - 请务必发帖。我会更新答案。

组件的名称和唯一ID

前提

问题

实施例

1 个答案:

行为不一致