嘿，我来帮你搞定这个问题！要在根实例的Reset方法里调用page_0组件的同名方法，有两种实用的实现方式，结合你的代码给你具体的修改方案：

方法一：使用ref直接引用子组件实例 #

这是最直接的方式，给子组件添加ref属性后，根实例就能通过$refs访问到子组件的实例，进而调用它的方法。

修改你的index.html中的子组件标签 #

给<page_0>加上ref属性：

<page_0 v-if="Page==0" ref="page0"></page_0>

修改根实例的Reset方法 #

在case 0的分支里，通过$refs调用子组件的Reset方法，注意先判断组件是否存在（因为v-if会在Page不为0时销毁组件）：

Reset: function(){
  switch(this.Page){
    case 0:{
      // 先确认组件实例存在，避免报错
      if (this.$refs.page0) {
        this.$refs.page0.Reset();
      }
      break;
    }
    // 其他case逻辑...
  }
}

方法二：使用自定义事件（更符合Vue组件通信原则） #

如果不想直接操作子组件实例，可以通过事件触发的方式实现，这种方式更解耦，适合复杂的组件结构。

修改根实例的Reset方法 #

在case 0分支里触发一个自定义事件：

Reset: function(){
  switch(this.Page){
    case 0:{
      // 向根实例触发自定义事件
      this.$emit('trigger-page-reset');
      break;
    }
    // 其他case逻辑...
  }
}

修改page_0.js中的组件代码 #

让子组件监听根实例的自定义事件，在事件回调中执行自己的Reset方法，同时记得在组件销毁时移除监听，防止内存泄漏：

Vue.component('page_0', {
  // ...你的其他组件选项
  created() {
    // 监听根实例的自定义事件
    this.$root.$on('trigger-page-reset', () => {
      // 额外判断当前页面是否为0，避免其他页面误触发
      if (this.$root.Page === 0) {
        this.Reset();
      }
    });
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听
    this.$root.$off('trigger-page-reset');
  },
  methods: {
    Reset: function() {
      // 你的重置数据逻辑
    },
    // ...其他方法
  }
})

两种方式对比 #

• ref方式：简单直接，适合小型项目或简单的组件关系场景。
• 自定义事件方式：更符合Vue的组件通信理念，解耦性更强，适合复杂的组件结构或需要多人协作的项目。

内容的提问来源于stack exchange，提问作者Yu Leung