Vue 的通信方式之隔代组件传值

父传孙

<template>
  <div>
    <h2>我是父组件</h2>
    <Son :version="version" @grandson="grandson" />
  </div>
</template>

<script>
import Son from '../components/Son'
export default {
  data() {
    return{
      version:"父传孙"
    }
  },
  methods: {
    // 孙传父
    grandson(data){
      console.log(data)
    }
  },
  components: {
    Son
  }
}
</script>

子组件

<template>
  <div>
    <h3>我是子组件</h3>
    <!-- $attrs可以获取父作用域传入的值（不包括props中的） -->
    <!-- $listeners相当于父作用域的事件监听器 -->
    <coon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import Coon from './Coon'
export default {
  data() {
    return{
      
    }
  },
  components: {
    Coon
  }
}
</script>

孙传父

<template>
  <div>
    <h4>我是孙组件</h4>
    <!-- 用过$attrs来拿父组件的值 -->
    <p>{{$attrs.version}}</p>
    <button @click="coon">孙传父</button>
  </div>
</template>

<script>
export default {  
  data() {
    return{
      val:"孙传父"
    }
  },
  methods: {
    coon(){
        this.$emit('grandson',this.val)
    }
  }
}
</script>

拿子组件的数据：this.$children[0]

拿父组件的数据：this.$parent