vue多层嵌套组件/祖孙传值，嵌套组件传值: v-on="$li

在不用状态管理vuex的时候，如何让GrandFather与Son通信，我们可以用可以attr、
$listeners ,可以实现跨级组件通信。

$listeners官网解说 ：事件传递

$attrs官网解说：属性传递

简言之，在GrandFather中给Father传事件与属性，在Father组件中使用
v-bind="listeners"，在Son组件中，就可以通过
this.emit('事件')来触发从GrandFather中传入的事件

GrandFather组件

<template>
    <div id="app">
        <father :info="info" @getData="getData"></father>
    </div>
</template>

<script>
    import Father from "./Father";

    export default {
      components: {
        Father},
      name: "main-page",
      data() {
          return {
            info:'我是来自父组件'
          }
      },
      created() {},
      mounted(){},
      methods: {
         getData (val) {
           this.msg = val
        },
      }
    }
</script>

Father组件

<template>
    <son v-bind="$attrs" v-on="$listeners"></son>
</template>

<script>
    import Son from "./Son";

    export default {
      components: {Son},
      name: "son",
      props:[]
    }
</script>

Son组件

<template>
  <div>
    <h1 class="btn">{{this.$attrs.info}}</h1>
  </div>
</template>

<script>
    export default {
      name: "temp-son",
      mounted() {
        this.$emit('getData','我来自孙子组件')
      }
    }
</script>