如何在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更加動態，讓父級傳遞一個帶有應該呈現的標簽的道具：

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

Answer 3

您可以嘗試關注功能而不是標簽：

 const localComponent = { name:'first-comp', template:`<div :class="wrappwithbutton && 'btn'" @click="btnClick" > {{text}} </div>`, props:['wrappwithbutton','text'], methods: { btnClick() { if (this.wrappwithbutton) console.log('button') } } } const app = new Vue({ el:'#app', name:'app', components:{'first-comp':localComponent}, }); Vue.config.productionTip = false Vue.config.devtools = false

 .btn { border: 1px solid violet; cursor: pointer; }

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