如何在模板的原始 HTML / x-referenced ID 元素中引用 VueJS 组件的名称？

Question

我实际上是在尝试根据 component-name 向我的 VueJS 组件添加一个 CSS class 它在下面注册（为所有这些特定类型的组件提供相同的样式).

例如：

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}} 名称，以便我可以将组件名称注入到页面上的结果组件中？

结果如下：

<form class="dragdropfile" id="someDragDropFiles" action="/upload-please" ... >
...
</form>

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

像 props: ["componentName", ...] 和;
在模板中将其称为 <form class='{{componentName}}' ...>

这是唯一可行的方法吗？

使用 VueJS 版本：1.0.17

(https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js)

Answer 1

解决方案 #1

在 Vue.component(...) 注册调用中使用 create: function() { console.log(this); } 检查对象持有的内容几分钟后，我在其中找到了名称 this.$options.name 属性。

换句话说：

<form class="{{this.$options.name}}" ...> ... </form>

或更短：

<form class="{{$options.name}}" ...> ... </form>

想想看，在每个组件模板上输入仍然需要一些手动工作，但可能有一种方法可以通过 created 方法自动附加 class。

解决方案 #2

这就是我一直在寻找的自动化方法！

就这样了，基本上我做了一个包装函数来在我需要注册新组件时调用，它在内部调用通常的 Vue.component(...) 方法。

NOTE: This example depends on jQuery to add the class and underscore.js for object merging via _.assign, but could probably be replaced by a direct *.classList.addClass() call instead. These are just the helper methods I'm familiar with, use what you like! :)

makeVueComponent(名称, 参数)

/*
 * Creates a Vue Component with a standardized template ID name (ie: #tagname-tmp)
 * combined with given params.
 */
function makeVueComponent(name, params) {
    //Ensure params is assigned something:
    params = params || {};

    //Backup a reference of an existing *.created() method, or just an empty function
    var onCreated = params.created || function(){};

    /*
        Delete the original `created` method so the `_.assign()` call near the end
        doesn't accidentally merge and overwrite our defaultParams.created() method.
     */
    delete params.created; 

    var defaultParams = {
        //Standardized template components to expect a '-tmp' suffix
        // (this gets auto-generated by my NodeJS/Express routing)
        template: "#"+name+"-tmp",

        // This part auto-adds a class name matching the registered component-name
        created: function() {
            var $el = $(this.$options.el);
            $el.addClass(this.$options.name);

            //Then forward this to any potential custom 'created' methods we had in 'params':
            onCreated.apply(this, arguments);
        }
    };

    //Merge default params with given custom params:
    params = _.assign(defaultParams, params);

    Vue.component(name, params);
}

然后像这样使用它：

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

然后您可以从我在 解决方案 1.

中提到的实际组件模板中省略那些 {{$options.name}}

如何在模板的原始 HTML / x-referenced ID 元素中引用 VueJS 组件的名称？

How do you refer to a VueJS component's name within the template's raw HTML / x-referenced ID element?

html

javascript

css

vue.js

vue-component

使用 VueJS 版本：1.0.17

解决方案 #1

解决方案 #2

makeVueComponent(名称, 参数)