vue2如何重载内部组件

在 Vue 2 中,你可以通过一些技巧来重新加载内部组件。一种常见的方法是使用 key 属性。当 key 发生变化时,Vue 会销毁旧的组件实例并创建一个新的实例。

下面是一个简单的例子,展示了如何通过按钮点击事件来重新加载子组件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reload Component Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <button @click="reloadComponent">Reload Component</button>
    <child-component :key="componentKey"></child-component>
  </div>

  <script>
    Vue.component('child-component', {
      template: '<div>This is a child component.</div>'
    });

    new Vue({
      el: '#app',
      data: {
        componentKey: 0
      },
      methods: {
        reloadComponent() {
          this.componentKey += 1;
        }
      }
    });
  </script>
</body>
</html>

在这个例子中,我们有一个按钮和一个子组件 child-component。每当按钮被点击时,reloadComponent 方法会被调用,从而增加 componentKey 的值。由于 key 发生了变化,Vue 会销毁并重新创建 child-component 实例,达到重新加载的效果。

发表回复