обернуть компонент шаблона своим именем

Question

У меня есть компоненты, и я хотел бы, чтобы каждый шаблон компонента был заключен в div с его именем.

Vue.component('search', {
        template: '<div>component template</div>'

html result

<div class="component-search">
      <div>component template</div>
</div>

Answer 1

Я не могу представить, почему вы хотели бы сделать это, но в любом случае вы могли бы сделать следующее

Vue.component('search', {
    name: 'search',

    template: `<div :class="wrapperClass">
        <div>component template</div>
    </div>`,

    computed: {
        componentName() {
            return this.$options.name
        },

        wrapperClass() {
            return `component-${this.componentName}`
        },
    }
})