在vuejs组件中干燥html而不创建更多组件是可能的吗？
在vuejs组件中干燥html而不创建更多组件是可能的吗？
提问于 2018-08-05 15:18:27
让我们说你有：
<template>
<div>
<!-- html for buttons -->
<!-- your form -->
<!-- html for buttons -->
</div>
</template>
<!-- rest of your component --> 在不使用单独的组件的情况下，是否有可能将html for buttons的html干涸？为了节省重复的3-4行html，继续添加组件似乎有很多工作要做吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-05 15:44:07
我不知道有哪个Vue api允许正确地执行，但是有一种方法。
有一个v-html，它可以为您提供原始的html，但是它将被呈现为普通的-which，所以您不能从那里使用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);
}
});将component方法导出到window属性，这样就可以从本机代码调用它。
不知道您的用例，但我非常肯定，我只会复制HTML代码或设置一个新组件，而不是这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51695596
复制相关文章
相似问题
腾讯云开发者
