VUE爷孙组件传值

$attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。

如果组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。

爷爷传孙子

1.爷爷组件的代码

<template>
  <div id="app">
    我是App最外层的爷爷组件
    <father  @arr='arr'  :datas='datas' :msg='msg'></father>
  </div>
</template>

<script>
import Father from './components/Father.vue'

export default {
  name: 'App',
  components: {
    Father
  },
  data() {
    return {
      datas: '我是datas',
      msg: '我是msg',
    }
  }
}
</script>

2.父组件的代码

<template>
  <div class="hello">
    我是父组件
    <p>这是由app传递过来的数据:::{{datas}}</p>

    <boy @arr='arr' v-bind='$attrs'></boy>//通过v-bind将$attrs传递给子组件
  </div>
</template>

<script>
import Boy from './Boy'
export default {
  name: 'Father',
  components:{
    Boy
  },
  props: {
   datas: {
     type: String
   }
  },
}
</script>

3.孙子组件代码

<template>
  <div class="hello">
    我是孙子组件  
     <p>这里是爷爷组件传递过来的值,但是不包括父组件已经用props接收的数据:::: {{$attrs}}</p>
  </div>
</template>

<script>
export default {
  name: 'Boy',
}
</script>

孙子组件向爷爷组件传值

1.爷爷组件代码

<template>
  <div id="app">
    我是App最外层的组件
    <p v-for="item in appArr" :key='item'>{{item}}</p>
  </div>
</template>

<script>
import Father from './components/Father.vue'

export default {
  name: 'App',
  components: {
    Father
  },
  data() {
    return {
      appArr: []
    }
  },
  methods: {
    getArr(data) {
      this.appArr = data
    }
  }
}
</script>

2.父亲组件代码

<template>
  <div class="hello">
    我是父组件
    <boy @arr='arr' v-on='$listeners'></boy>
  </div>
</template>

<script>
import Boy from './Boy'
export default {
  name: 'Father',
  components:{
    Boy
  }
}
</script>

3.孙子组件代码

<template>
  <div class="hello">
    我是子组件   
    <button @click='clickBoy' >点击按钮向爷爷组件传递数据</button>
  </div>
</template>

<script>
export default {
  name: 'Boy',
  data() {
    return {
      arr:['西游记','红楼梦','三国演义','水浒传']
    }
  },
  methods:{
    clickBoy() {
      //这两种方法都是可以的
      // this.$emit('getArr',this.arr)  
      this.$listeners.getArr(this.arr)
    }
  }
}
</script>