设置属性并从 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) 
}

有关演示，请参阅the sandbox here