Vue3.0跨级嵌套组件通信$attrs，context.attrs和.emit的使用

上一篇vue2.x的文章已经提过，就不作多说明，组件可以有以下几种关系：
如下图所示，A 和 B、B 和 C/D 都是父子关系，C 和 D 是兄弟关系，A 和 C/D 是隔代关系。
vue2.x文章移步到：Vue2.x跨级组件嵌套组件通信$attrs，$listeners，inheritAttrs的使用

$attrs： 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (包含class 和 style)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (包含class 和 style )，并且可以通过 v-bind=“$attrs” 传入内部组件。

在Vue3.0版本中，$listeners / inheritAttrs已被移除掉，现在事件监听器是 $attrs 的一部分。

案例组件（父子孙）

同样，我们创建3个组件： 父组件：parent.vue，子组件：child.vue，孙组件：grandchild.vue

• 父组件：parent.vue

<template>
  <div class="parent-root">
    <child
      class="child"
      :name="name"
      :age="age"
      @grandchildByValue="grandchildByValue"
    >
    </child>
  </div>
</template>

<script>
import { ref } from 'vue'
import child from '@/views/test/child.vue'
export default {
  name: 'parent',
  components: { child },
  props: {},
  setup() {
    const name = ref('小明'),
      age = ref(18),
      grandchildByValue = value => {
        console.log('孙组件传过来的值：', value)
      }
    return {
      name,
      age,
      grandchildByValue
    }
  }
}
</script>

<style scoped lang="scss"></style>

• 子组件：child.vue

<template>
  <div class="child-root">
    <grandchild v-bind="$attrs"></grandchild>
  </div>
</template>

<script>
import { ref } from 'vue'
import grandchild from '@/views/test/grandchild.vue'
export default {
  name: 'child',
  components: { grandchild },
  props: {},
  setup(context) {
    console.log('attrs:', context.attrs) 
  }
}
</script>

<style scoped lang="scss"></style>

• 孙组件：grandchild.vue

<template>
  <div class="grandchild-root">
    <p>name：{{ name }}</p>
    <p>age：{{ age }}</p>
    <el-button type="primary" @click="fn">孙子传值爷爷</el-button>
  </div>
</template>

<script>
export default {
  name: 'grandchild',
  components: {},
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: null
    }
  },
  setup(context) {
    const fn = () => {
      context.emit('grandchildByValue', '爷爷，您好')
    }
    return {
      fn
    }
  }
}
</script>

<style scoped lang="scss"></style>

层级关系截图