VUE中子组件和父组件通信之router-view组件

1、vue中父组件通过props传递参数到子组件中，子组件接收父组件的数据后可以直接使用。这里就不再给普通的组件的例子了，我们直接上vue-router，首先在入口函数main.js中定义路由：

2、然后在父组件App.vue中使用vue-router，见图片中的router-盟敢势袂link和router-view，选中的router-link会加载到router-view中，这里我们使用v-bind指令将Appp.vue中的msg传递到子组件

3、npm run dev，启动开发环境，见下图，父组件的msg，顺利被子组件接收且使用。

4、接下来在子组件中加入发送$emit事件的方法：子组件mounted后执行init方法，init发送test事件和数据first或者second;

5、父组件成功响应test事件，执行testp函数，修改msg值，msg通过props传递到子组件，效果如下

6、是不是不再困惑了？实际开发中，可能页面有嵌套router-view，出现多层的情况，每组父子组件采用如上方式处理即可。