Vue.js 使用其名称包装模板组件

我有组件，我想每个组件模板包装在一个div与他的名字

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

Vue.component（'search'{
模板：“组件模板”

html结果

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

组件模板

我无法想象你为什么要这么做，但无论如何你可以做到以下几点

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}`
        },
    }
})

Vue.component（'search'{
名称：'搜索'，
模板：`
组件模板
`,
计算：{
组件名称（）{
返回此项。$options.name
},
包装类（）{
返回`component-${this.componentName}`
},
}
})

Hi。我没有全面的解决方案，但我认为Vue渲染函数可能会有所帮助。或者更仔细地看一下您的Vue加载程序API。提供了许多很酷的功能。原因：测试selenium。我想找到一种方法来选择组件和子值。最快的方法是对Vue进行某种扩展（可能是原生的）在模板渲染完成的地方，它也会被包装到一个div中，该div包含一个名为componentName的类。我不想手动执行该操作。@forX也以任何方式执行了我建议的帮助。我从未创建vue扩展。options.name的信息很有趣，但我不会在每个组件上都这样做。