在vue中 父传子 祖父传值

1. 父传子

在 Vue 中，父组件可以通过 props 将数据传递给子组件。

父组件

<template>  
  <div>  
    <ChildComponent :myProp="parentData" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentData: '我是父组件的数据'  
    };  
  }  
};  
</script>

子组件 (ChildComponent.vue)：

<template>  
  <div>{{ myProp }}</div>  
</template>  
  
<script>  
export default {  
  props: {  
    myProp: String  
  }  
};  
</script>

2. 祖父传值（多级传值）

要把祖父组件的数据传递给孙组件，可以通过逐层传递 props 来实现，或者使用 Vuex 进行状态管理。但如果只是想要传递数据，不涉及到状态管理，那么逐层传递 props 是最简单的方式。

祖父组件：

<template>  
  <div>  
    <ParentComponent :grandparentData="grandparentData" />  
  </div>  
</template>  
  
<script>  
import ParentComponent from './ParentComponent.vue';  
  
export default {  
  components: {  
    ParentComponent  
  },  
  data() {  
    return {  
      grandparentData: '我是祖父组件的数据'  
    };  
  }  
};  
</script>

然后，在 父组件 中将 grandparentData 作为 props 传递给 子组件（同父传子），再由 子组件 传递给 孙组件。