应用场景举例:
在通过路由控制的父组件中,有一个公共的菜单栏,
展开某一个sub-menu时,需要把展开的key传递给子组件,
子组件通过这个key,请求后端拿到页面数据。
上述场景中用到了route-view组件。
父组件BasicLayout.vue文件中相关代码如下:
<a-layout-content>
<multi-tab v-if="multiTab"></multi-tab>
<transition name="page-transition">
<route-view ref="square" />
</transition>
</a-layout-content>
methods: {
onSubMenuTitleClick(key){
this.selectedSiteId = key;
console.log("当前选中的id是:",key);
console.log("this.refs",this.$refs);
this.$refs.square.$children[0].watchTest(key);
}
}
1. 通过在在父组件的route-view中添加 ref="square"作为子组件的引用名。
2. this.$refs.square.$children[0].watchTest是直接调用子组件中的watchTest方法。
PS:思路是在父组件中给子组件添加取一个引用名,然后通过this.$refs.直接调用子组件。
看到有博客写直接用this.$refs.square.watchTest()就能调用,
https://blog.csdn.net/silent_missile/article/details/91128451,亲测不行,
自己coding的时候如果发现调不到,可以通过 console.log("this.refs",this.$refs);打出根节点。
逐层找。
子组件Square.vue
中正常定义watchTest函数即可。
methods: {
watchTest(value){
console.log("selectedSiteId",value);
}
}
router.config.js 相关代码如下:
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '业务工具广场' },
redirect: '/bbx/square',
children: [
{
path: '/bbx/square',
name: 'Square',
component: () => import('@/views/bbx/Square'),//RouteView,
meta: { title: '业务工具广场', keepAlive: true, icon: bxAnaalyse },
},{
path: '/bbx/tool',
name: 'Tool',
component: () => import('@/views/bbx/Tool'),
meta: { title: '工具调试', keepAlive: true },
hidden: true
}
]
}