Vuejs2 是否可以在不创建更多组件的情况下在vuejs组件中干燥html？

假设你有：

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

---

是否可以在不使用单独组件的情况下干燥按钮的

html

？为了保存重复的3-4行html，继续添加组件似乎需要做很多工作？

我不知道有哪种Vue api允许正确地添加组件，但是有一种方法

有

v-html

可以为您提供干式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>`
    }
  }
});

//模板
{{content}}

//剧本
新Vue({
el:“#应用程序”，
数据：{
内容:"某句话",，
干含量：`
你好，世界

`
},
计算：{
computedString（）{
返回`${this.content}
`
}
}
});

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

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

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

dryContent:`
你好，世界

`

它会起作用的

还有一种非常模糊的模式，我完全不建议，但它实际上会满足你的需要：

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

newvue({
el:“#应用程序”，
数据：{
内容:"某句话",，
干含量：`
你好，世界

`
},
计算：{
computedString（）{
返回`${this.content}
`
}
},
创建（）{
window.modifyContent=函数（）{
this.content='modified！！'；
}.约束（本）；
}
});

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

---

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

我不知道任何Vue api允许正确地执行此操作

有

v-html

可以为您提供干式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>`
    }
  }
});

//模板
{{content}}

//剧本
新Vue({
el:“#应用程序”，
数据：{
内容:"某句话",，
干含量：`
你好，世界

`
},
计算：{
computedString（）{
返回`${this.content}
`
}
}
});

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

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

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

dryContent:`
你好，世界

`

它会起作用的

还有一种非常模糊的模式，我完全不建议，但它实际上会满足你的需要：

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

newvue({
el:“#应用程序”，
数据：{
内容:"某句话",，
干含量：`
你好，世界

`
},
计算：{
computedString（）{
返回`${this.content}
`
}
},
创建（）{
window.modifyContent=函数（）{
this.content='modified！！'；
}.约束（本）；
}
});

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

---

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

我认为将其作为子组件是一种方法，现在我已经阅读了这篇文章。也许设置我的工作流程，这样一个快速的命令行脚本来充实组件并将其添加到我的app.js中可能是一个明智的方法。谢谢你提供了一个能证明思想的答案。我认为把它作为一个子组件是一条路，现在我已经读过了。也许设置我的工作流程，这样一个快速的命令行脚本来充实组件并将其添加到我的app.js中可能是一个明智的方法。谢谢你的回答。