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

CooCls
  • 83

项目中用到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

clipboard.png


组件B
clipboard.png

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


更新(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....尝试失败....

回复
阅读 6k
4 个回答
hermanhe
  • 117

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

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

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

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跳过来的
如果是就触发 表单提交

现为一曲线救国方法,能实现需求但有悖业务逻辑。
为父组件内的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()
暂未完美解决,待找到完美解决方案后再做更新.

宣传栏