vue-router如何调用另一组件中声明的方法

Question

项目中用到vue-router,有组件A和组件B，标签<router-view>中显示组件A，组件A中有一事件a会让<router-view>中显示的内容变为组件B，如何在组件A的事件a中调用组件B里面声明的事件b呢？

---

组件A内的事件a会关闭组件A(基本表单)，<router-view>显示内容变为组件B(单基因遗传...)，欲在显示内容变为组件B后立即执行组件B中的事件b

---

组件B

该功能是否可行？希望能有一个思路...

---

更新（2/25）：

子组件A
<template>
    <h1>子组件A</h1>
    <button v-on:click="funcA">按钮</button>
</template>
<script>
    export default{
        methods: {
            funcA(){
                console.log('组件A-方法执行');
                this.$emit('eventCall');
            }
        }
    }
</script>

父组件
<template>
    <router-view ref="currentView" v-on:eventCall="callB"></router-view>
</template>
<script>
    export default{
        methods: {
            callB(){
                console.log("父组件callB方法触发");
                this.$refs.currentView.funcB();
            }
        }
    }
</script>

子组件B
<template>
    <h1>子组件B</h1>
</template>
<script>
    export default{
        methods: {
            funcB(){
                console.log('组件B-方法执行');
                alert("成功！");
            }
        }
    }
</script>

---

然而此方法在父组件调用ref里面的方法时，当前的ref为组件A，获取不到组件B....尝试失败....

Answer 1

如果只是想调用单纯的没有数据交换的方法，直接import，然后在组件的methods中调用该import出来的对象。不知道有没理解错。

Answer 2

一种方法是使用vuex，b组件created的时候做一次判断，如果xxx为true便执行b里面的某个方法，数据就从vuex上取。
a组件触发某个事件后更新数据状态并修改xxx为true，然后路由跳转到b组件，便可解决你所说的问题了。
如果你觉得不需要用到vuex，还有组件通信结合url的方法同样可以实现。类似方法还是很多的

Answer 3

其实这件事的本质就是 路由发生了变化
可以用

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

在b组件的beforeRouteEnter钩子里面判断是不是从a跳过来的
如果是就触发 表单提交

Answer 4

现为一曲线救国方法，能实现需求但有悖业务逻辑。
为父组件内的router-view绑定key值，对应一个随机数，让路由以为每次路由变化时是另一个新的组件，从而重新加载组件B，触发组件B中的钩子created，调用方法b。

父组件
<template>
    <router-view :key="key"></router-view>
</template>
<script>
    export default{
        computed: {
            key(){
                return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
            }
        }
    }
</script>

子组件B
<template>
    <h1>子组件B</h1>
</template>
<script>
    export default{
        methods: {
            funcB(){
                console.log('组件B-方法执行')
                alert("成功！")
            }
        }，
        created: function(){
            this.funcB()
        }
    }
</script>

---

以上实现方式有bug，router-view里面的组件每次切换为组件B的时候，都会调用一次funcB()。
而初衷是在组件A里面的事件a触发，router-view里面的组件切换为组件B的同时调用funcB()。
暂未完美解决，待找到完美解决方案后再做更新.