route-view 在父组件中调用子组件的函数

应用场景举例：

在通过路由控制的父组件中，有一个公共的菜单栏，

展开某一个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
      }
    ]
  }