javascript - 如何在vue中动态包装带有html标签的组件内容

Question

嗨，我想用一些特定的 html 标签来包装组件的内容，比如说 button对于这个例子。
我有一个函数可以动态返回一个值，我将其用作 Prop ，基于我想要包装组件的内容。
我知道我也可以做到这一点<button><compA/></button>它不能解决我的问题，因为我需要在 100 个地方更改它。
我的预期结果:

<button><div>press me i'm button</div></button>

<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

这是渲染函数的完美示例。您可以使用渲染函数来为您渲染模板，而不是使用模板。 Read more about render functions

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