Javascript 如何引用VueJS组件'；模板中的名称'；s原始HTML/x引用的ID元素？

我实际上是在尝试根据它注册的

组件名称

将CSS类添加到VueJS组件中（以使所有这些特定类型的组件具有相同的样式）

例如：

Vue.component('dragdropfile', {
    // This refers to a unique template element (see HTML below)
    template: "#dragdropfile-tmp",
    props: ['action']
});

在Vue组件模板中：

<template id="dragdropfile-tmp">
    <form action="{{action}}" method="post" enctype="multipart/form-data">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
        <div class="dz-message" data-dz-message>
            <div class="dz-default">
                <!--
                    According to VueJS docs / forums, "slot" gets replaced by any innerHTML
                    passed from the incoming component usage.
                -->
                <slot></slot> 
            </div>
        </div>
    </form>
</template>

最后，它在“index.html”页面中的使用方式如下：

<dragdropfile id="someDragDropFiles" action="/upload-please">
  Do you have files to upload?<br/>
  <b>Drop it here!</b>
</dragdropfile>

您有文件要上传吗？

把它扔在这里！

现在，虽然我可以为每个组件HTML模板手动输入组件名称，但我希望实现自动化

Vue是否有内部使用的任何特殊内置的

{{binding}

名称，以便我可以将组件名称插入页面上生成的组件中

这样的结果：

……

或者我只是需要自己将其作为新组件属性传递？例如：

• 手动调用它，如

  props:[“componentName”，…]

  和
• 在模板中将其称为

这是唯一可行的办法吗

使用VueJS版本：1.0.17 （）

解决方案#1 在

Vue.component（…）

registration调用中使用

create:function（）{console.log（this）；}

检查了几分钟后，我在它的

this.$options.name

属性中找到了该对象的名称

换言之：

甚至更短：

仔细想想，输入每个组件模板仍然需要一些手工工作，但是可能有一种方法可以通过

created

方法自动附加类

---

解决方案#2 这是我一直在寻找的自动化方法

在这里，基本上我创建了一个包装器函数，在需要注册新组件时调用它，它在内部调用通常的

Vue.component（…）

方法

注意：此示例依赖于jQuery添加类和下划线.js通过

\uu.assign

进行对象合并，但可能被直接调用

*.classList.addClass（）

代替。这些只是我熟悉的助手方法，可以随意使用！：）

makeVueComponent（名称、参数）

然后像这样使用它：

//Register your Vue Components:
makeVueComponent("dragdropfile", {props:['action']});

---

然后，您可以从我在解决方案1中提到的实际组件模板中省去那些

{{$options.name}

。

注意，解决方案不一定要使用

v1.0.17

，我可以从今天起升级到最新版本（

v2.1.6

）如果它对这个特殊情况有更好的处理。

//Register your Vue Components:
makeVueComponent("dragdropfile", {props:['action']});