Vue.js -如何将道具传给孙子孙女

<!-- 爷爷组件 -->
<template>
  <div>
    <h2>爷爷组件</h2>
    <<父组件名称> :propName="propValue"></<父组件名称>>
  </div>
</template>

<script>
import 子组件名称 from './子组件路径'

export default {
  name: '爷爷组件',
  components: {
    子组件名称
  },
  data() {
    return {
      propValue: '传递给子组件的数据'
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <h3>父组件</h3>
    <<子组件名称> :propName="propValue"></<子组件名称>>
  </div>
</template>

<script>
import 孙子孙女组件名称 from './孙子孙女组件路径'

export default {
  name: '父组件',
  components: {
    孙子孙女组件名称
  },
  data() {
    return {
      propValue: '传递给孙子孙女组件的数据'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h4>子组件</h4>
    <<孙子孙女组件名称> :propName="propValue"></<孙子孙女组件名称>>
  </div>
</template>

<script>
import 孙子孙女组件名称 from './孙子孙女组件路径'

export default {
  name: '子组件',
  components: {
    孙子孙女组件名称
  },
  props: {
    propName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      propValue: this.propName
    }
  }
}
</script>

<!-- 孙子孙女组件 -->
<template>
  <div>
    <h5>孙子孙女组件</h5>
    <p>接收到的道具值：{{ propName }}</p>
  </div>
</template>

<script>
export default {
  name: '孙子孙女组件',
  props: {
    propName: {
      type: String,
      required: true
    }
  }
}
</script>