Question

让我们说您拥有：

<template>
   <div>
      <!-- html for buttons -->
      <!-- your form -->
      <!-- html for buttons -->
    </div>
</template>
<!-- rest of your component -->

是否可以在不使用单独组件的情况下将html for buttons的html进行干燥？似乎要继续添加组件只是为了节省重复的3-4行html，需要做很多工作？

Answer 1

我不知道有什么Vue api可以正确执行此操作，但是有一种方法。

有v-html可以为您提供DRY html，但是它将以纯HTML呈现，因此您不能从那里使用Vue事件-我猜您的按钮可以做到这一点。

例如：

//template 
<div id="app">
  <div v-html="dryContent"></div>
  <p>{{content}}</p>
  <div v-html="dryContent"></div>
    <div v-html="computedString"></div>
</div>


//script
new Vue({
  el: '#app',
  data: {
    content: 'some sentence',
    dryContent: `<div>
<p>Hello world!</p>
</div>`
  },
  computed: {
    computedString() {
      return `<p>${this.content}</p>`
    }
  }
});

将正确呈现HTML。但是您不能在呈现的HTML中设置vue事件侦听器。

但是，您仍然可以设置本机侦听器：

    dryContent: `<div>
  <p onclick="console.log('foo')">Hello world!</p>
  </div>`

它将起作用。

而且，确实有一种我完全不建议使用的模糊模式，但实际上可以满足您的需求：

new Vue({
  el: '#app',
  data: {
    content: 'some sentence',
    dryContent: `<div>
  <p onclick="modifyContent()">Hello world!</p>
  </div>`
  },
  computed: {
    computedString() {
      return `<p>${this.content}</p>`
    }
  },
  created() {
    window.modifyContent = function() {
      this.content = 'modified!!';
    }.bind(this);
  }
});

将组件方法导出到window属性，以便可以从本机代码调用它。

不知道您的用例，但是我敢肯定，我只会复制HTML代码或设置一个新组件，而不是这样做。

是否可以在vuejs组件中干燥html而无需创建更多组件？

1 个答案: