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需要花费时间，更改数据后，您会立即获得myDetails outsideHTML，这没有时间传播更改。设置如下所示的轻微延迟将获得预期的输出：

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

有关演示，请参见the sandbox here

设置属性并从Vue组件检索HTML作为字符串

1 个答案: