vue3同级页面调用方法

可以使用Vue 3中的Provide/Inject来在同级页面之间共享方法。

例如，在父级组件中定义一个方法：

export default {
  provide: {
    myMethod: () => {
      console.log('This is my method')
    }
  }
}

在同级的子级组件中，可以使用inject来获取该方法：

export default {
  inject: ['myMethod'],
  mounted() {
    this.myMethod()
  }
}

这样，当子级组件被挂载时，就会调用父级组件中的myMethod方法。

相关问题

vue2 同级组件调用方法

在 Vue.js 2 中，同级组件之间的通信通常通过事件系统或者自定义属性（prop）来完成，而不是直接调用对方的方法。这里简单介绍两种常见的方式：

1. **事件（Event Bus）**:
如果组件A需要触发某个操作并让组件B响应，可以使用Vue官方推荐的事件总线（event bus）模式。创建一个独立的Vue实例作为事件中心，发布事件时，`this.$emit('eventName', data)`；而在组件B上监听这个事件，`this.$on('eventName', (data) => { ... })`。

2. **自定义属性（Prop）**:
直接在 prop 中传递一个函数，然后在接收端调用它。例如，在组件A中，你可以将一个方法通过 prop 传给组件B：

   <template>
     <b :call-me="myMethodToPass" />
   </template>

   <script>
   export default {
     methods: {
       myMethodToPass(data) {
         // 在这里执行你需要的操作
       }
     }
   };
   </script>

然后在组件B里：

   <template>
     <button @click="parentCallMe">调用我的方法</button>
   </template>

   <script>
   import { mapActions } from 'vuex';
   
   export default {
     methods: {
       parentCallMe() {
         this.callMe();
       },
       ...mapActions(['myAction']) // 如果来自Vuex store
     },
     props: {
       callMe: { type: Function, required: true }
     }
   };
   </script>

vue中同级组件调用方法

在Vue中，同级组件之间的通信可以通过props和事件来实现。如果组件A要调用组件B的方法，可以在组件A中使用$refs来获取组件B的实例，并调用其方法。

例如，假设有两个同级组件A和B，B组件中有一个名为doSomething的方法，A组件想要调用B组件的doSomething方法，可以按照如下步骤操作：

1. 在B组件中给doSomething方法添加一个ref属性，如下所示：

<template>
  <div ref="myCompB">
    <!-- B组件的内容 -->
  </div>
</template>

<script>
export default {
  name: 'compB',
  methods: {
    doSomething() {
      // B组件的doSomething方法
    }
  }
}
</script>

2. 在A组件中使用$refs获取B组件的实例，并调用其doSomething方法，如下所示：

<template>
  <div>
    <!-- A组件的内容 -->
    <button @click="callCompBMethod">调用B组件的方法</button>
  </div>
</template>

<script>
export default {
  name: 'compA',
  methods: {
    callCompBMethod() {
      // 获取B组件的实例
      const compB = this.$refs.myCompB;
      // 调用B组件的doSomething方法
      compB.doSomething();
    }
  }
}
</script>

这样，当A组件中的按钮被点击时，就会调用B组件的doSomething方法。