set属性并从Vue组件中检索HTML作为字符串

Question

为了分离我的代码并使其更清晰，我想使用 Vue 组件作为 HTML 模板，将一些参数传递给模板并将生成的 HTML 作为字符串返回。

我做了一个简单的例子，几乎可以工作，但由于某种原因，返回的HTML不是最新的。当我点击"点击我"时，我确实从"MyDetails"组件中得到了一个HTML字符串，但它显示了从上次传递的值，我点击了"点击我"按钮，而不是显示实际值。

Main.vue

<template>
<div>
<p>
<myDetails ref="myDetails"/>
</p>
<button @click="handleClick">click me</button>
<p>{{message}}</p>
</div>
</template>
<script>
import MyDetails from "/components/MyDetails.vue";
export default {
name: "hello",
components: {
MyDetails
},
methods: {
handleClick() {
this.$refs.myDetails.setMessage(new Date().getTime());
this.message = this.$refs.myDetails.$el.outerHTML;
}
},
data() {
return {
message: ""
};
}
};
</script>

MyDetails.vue

<template>
<div style="background-color:red">
<h1>MyDetails component</h1>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: "hello",
data() {
return {
message: ""
};
},
methods: {
setMessage(value) {
this.message = value;
}
}
};
</script>

在上面的示例中，"MyDetails"从一开始就是模板的一部分。是否可以在点击处理程序中动态加载它，以便在我点击"点击我"按钮之前它不会显示？

请在此处查看代码：https://codesandbox.io/s/vue-fullcalendar-example-50sv9?fontsize=14&hidenavigation=1&theme=dark

Answer 1

更新 DOM 需要时间，在更改其数据后，您会立即获得myDetailsouterHTML，这不会给更改传播时间。按如下方式设置轻微延迟将按预期输出：

handleClick() {
this.$refs.myDetails.setMessage(new Date().getTime());
setTimeout(() => {
this.message = this.$refs.myDetails.$el.outerHTML;
}, 100) 
}

有关演示，请参阅此处的沙盒