Как вы ссылаетесь на имя компонента VueJS в необработанном элементе идентификатора HTML / x-referenced шаблона?

По сути, я пытаюсь добавить класс CSS к своим компонентам VueJS на основе component-name, под которым он зарегистрирован (чтобы придать всем этим конкретным типам компонентов один и тот же стиль).

Например:

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-шаблона компонента, я хочу автоматизировать это.

Существуют ли какие-либо специальные встроенные {{binding}} имена, которые Vue использует внутри себя, чтобы я мог вставить имя компонента в получившийся компонент на странице?

Чтобы получить что-то вроде этого:

‹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)

bigp 15.12.2016 источник

comment

Обратите внимание, что решение не обязательно должно работать с v1.0.17, я мог бы обновить его до последней версии на сегодняшний день (v2.1.6), если оно будет лучше обрабатывать в этом конкретном случае. - bigp 15.12.2016

Ответы (1)

arrow_upward
10
arrow_downward

Решение # 1

После нескольких минут проверки содержимого объекта с помощью create: function() { console.log(this); } в Vue.component(...) вызове регистрации я нашел имя в его свойстве this.$options.name.

Другими словами:

‹Form class =" {{this. $ Options.name}} "...› ... ‹/form›

Или даже короче:

‹Form class =" {{$ options.name}} "...› ... ‹/form›

Если подумать, это все еще немного ручной работы для ввода в каждый шаблон компонента, но, вероятно, есть способ автоматически добавить класс с помощью метода created.

Решение # 2

Это тот автоматизированный подход, который я искал!

Вот и все, в основном я сделал функцию-оболочку для вызова всякий раз, когда мне нужно зарегистрировать новые компоненты, которая внутренне вызывает обычный метод Vue.component(...).

ПРИМЕЧАНИЕ. Этот пример зависит от jQuery для добавления класса и underscore.js для слияния объектов через _.assign, но, вероятно, его можно заменить прямым *.classList.addClass() вместо этого звоните. Это просто вспомогательные методы, с которыми я знаком, используйте то, что вам нравится! :)

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

And then just use it like so:

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

Затем вы можете исключить те {{$options.name}} из ваших фактических шаблонов компонентов, которые я упоминал в решении 1.

bigp 15.12.2016