如何在vue中动态地用HTML标签包装组件内容

Question

嗨，我想用一些特定的html标签来包装一个组件的内容，比如在这个例子中是button。

我有一个函数，它动态返回一个值，我用它作为道具，基于这个值我想包装一个组件的内容。

我知道我也可以这样做，<button><compA/></button>它不能解决我的问题，因为我需要在100个地方改变它。

我的预期结果:

1. <button><div>press me i'm button</div></button>
2. <div>don't wrap me with button leave me as it is</div>

注意::wrappwithbutton=""第一次使用true,false第二次使用

const localComponent = {
name:'first-comp',
template:`<div> {{text}}</div>`,
props:['wrappwithbutton','text'],
}

const app = new Vue({
el:'#app',
name:'app',
components:{'first-comp':localComponent},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<first-comp :wrappwithbutton="true" text="press me i'm button"></first-comp>

<br/>
<hr/>
<br/>

<first-comp :wrappwithbutton="false" text="don't wrap me with button leave me as it is"></first-comp>
</div>

Answer 1

这是渲染函数的完美示例。您可以使用呈现函数为您呈现模板，而不是使用模板。阅读更多渲染函数

const localComponent = {
name:'first-comp',
props:['wrappwithbutton', 'text'],
methods: {
btnClick() {
if (this.wrappwithbutton) console.log('button')
}
},
render(h) {
return h(this.wrappwithbutton ? 'button' : 'div', [
h('div', this.text)
])
}
}
const app = new Vue({
el:'#app',
name:'app',
components:{'first-comp':localComponent},
});
Vue.config.productionTip = false
Vue.config.devtools = false

你甚至可以更进一步，让你的localComponent更动态与父传递一个应该呈现的标签的prop:

const localComponent = {
name:'first-comp',
props:['tag', 'text'],
methods: {
btnClick() {
if (this.wrappwithbutton) console.log('button')
}
},
render(h) {
return h(this.tag, [
h('div', this.text)
])
}
}

如果你想有一个div而不是两个divs，你可以这样做:

render(h) {
if (this.tag === 'div') {
return ('div', this.text);
}
return h(this.tag ? 'button' : 'div', [
h('div', this.text)
])
}

Answer 2

这是我的想法，但我认为模板应该有一个更简洁的方式来写

const localComponent = {
name: "first-comp",
template: `
<template v-if="wrappwithbutton">
<button>
<div> {{text}}</div>
</button>
</template>
<template v-else>
<div> {{text}}</div>
</template>
`,
props: ["wrappwithbutton", "text"]
};
const app = new Vue({
el: "#app",
name: "app",
components: { "first-comp": localComponent }
});