前端（8）vue中router-view与父组件之间的通信

在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。仔细想一下，其实类似父子组件之间的传值。实现过程如下：

1. 父组件绑定属性和事件

<template>
   <router-view v-on:test="testP" v-bind:msg="msg"></router-view>
</template>
<script type="text/javascript">
   export default {
      data() {
         return {
            msg: "把我带给router-view吧！"
         }
      },
      methods: {
        testP: function (data) {
          // 从router-view返回来的数据
          console.log(data)
          // 打印出来就是
          // 把我带给父组件吧！第一次！
          // 把我带给父组件吧！第二次！
        }
      }
   }
</script>

2. router-view关联的属性和监听动作

<template>
   <div>{{msg}}</div>
</template>
<script type="text/javascript">
   export default {
      props:['msg'],
      data() {
         return {}
      },
      watch: {
        // 监听父组件的msg的变化
        msg: function() {
          console.log(this.msg)
          // 打印出来就是
          // 把我带给router-view吧！
        }
      },
      mounted() {
        // this.init()
      },
      methods: {
        init() {
          // 第一次向父组件传值
          this.$emit("test", "把我带给父组件吧！第一次！")
          // 第二次向父组件传值
          this.$emit("test", "把我带给父组件吧！第二次！")
        }
      }
   }

参考文档

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