vue3中父组件对子组件传值 父组件对孙组件传值

父===============================================》子

首先在父组件所在的界面

<DFSview   :bdid=id/>

子组件界面

const props= defineProps({
    bdid:String
})

const id = props.bdid

父===============================================》孙

某个深层的子组件需要一个较远的祖先组件中的部分数据

使用provide 和 inject 可以帮助我们解决这一问题。 任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

示例

index.vue

<script setup>
import { ref, provide } from 'vue'
import Child from './FzczChild.vue'

const message = ref('he1lo')
provide('message', message)
</script>

<template>
  <input v-model="message">
  <Child />
</template>

FzczChild.vue

<script setup>
import GrandChild from './FzczGrandChild.vue'
</script>

<template>
  <GrandChild />
</template>

FzczGrandChild.vue

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
</template>

应用层

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')