Question

我有一个组件，它作为DOM渲染的一部分安装。应用程序的框架是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
      <button>press this button to reload the component</button>
    </div>
  </body>
</html>

<my-component>功能正常（它会显示一些表单输入）和$emit数据给父母。

有没有办法重新安装它？目标是让组件内容和设置好像是第一次呈现（包括重置{{1}保持其状态的元素。）

有some solutions，但他们都假设重写data()，我想避免。

我的理解是，一个组件是在渲染过程中在dom中正确注入的HTML / CSS / JS代码，所以我担心“重新安装”它的概念不存在 - 我只想制作确定在进入data（）之前 - 重写方式。

Answer 1

我必须使用一个表组件来做到这一点，该组件没有考虑包含更改数据的方法。 诀窍是改变密钥。当密钥更改时，vue将其视为不同的组件。例如，created()挂钩只会运行一次，所以如果你看到价值变化，你会看到一个全新的对象。

示例：

Vue.component('my-component', {
  template: `<div>{{ rand }}</div>`,
  data() {
    return {
      rand: ''
    }
  },
  created() {
    this.rand = Math.round(Math.random() * 1000)
  }
});

new Vue({
  el: '#app',
  data: {
    componentKey:0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>

<div id="app">
  <my-component :key="componentKey"></my-component>
  <button @click="componentKey++">press this button to reload the component</button>
</div>

Answer 2

在您的模板中，您将添加 v-if 指令：

<template>
  <my-component v-if="renderComponent" />
</template>

在您的脚本中，您将添加使用 nextTick 的此方法：

<script>
  export default {
    data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
  };
</script>

这就是这里发生的事情：

<块引用>

初始renderComponent设置为true，所以渲染my-component 当我们调用 forceRerender 时，我们立即将 renderComponent 设置为 false 我们停止渲染 my-component 因为 v-if 指令现在评估为 false 在下一个刻度上，renderComponent 被设置回 true 现在 v-if 指令的计算结果为 true，所以我们再次开始渲染 my-component

如何重新安装组件？

2 个答案: