如何在 VueJS 中重新挂载组件？

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 数据给父级。

有没有办法重新挂载它？目标是让组件内容和设置就像第一次渲染一样（包括重置data() 个保持其状态的元素。

有 some solutions，但他们都假定重写 data()，我想避免这种情况。

我的理解是，组件实际上是 HTML/CSS/JS 代码，在渲染过程中被注入到 dom 的正确位置，所以我担心 "re-mounting" 的概念不存在- 我只是想在进行数据（）-重写之前先确定一下。

Answer 1

诀窍是改变密钥

当key改变时，vue会认为它是一个新的组件，所以它会卸载"old"组件，并挂载一个"new"组件。

参见示例，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=!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>

这是这里发生的事情：

Initially renderComponent is set to true, so my-component is rendered When we call forceRerender we immediately set renderComponent to false We stop rendering my-component because the v-if directive now evaluates to false On the next tick renderComponent is set back to true Now the v-if directive evaluates to true, so we start rendering my-component again

如何在 VueJS 中重新挂载组件？

How to re-mount a component in VueJS?

vue.js

vuejs2

vue-component

vuejs3

诀窍是改变密钥