1. 传统方式：父组件通过Props将值逐级传递给要接受的子组件

// 父组件<child :data="list"></child><script lang="ts" setup>
import {  reactive, toRefs} from 'vue';
const state = reactive({list:[]
})const { list} = toRefs(state)
</script>// 子组件//通过 defineProps 来接收传递数据
defineProps({list{type: Array,required: true,default: () => []}
});

2. 简单方式：通过provide / inject的方式传递参数 

// 父组件import { provide } from 'vue'//provide接收两个参数 （注入名称，传递值）
provide('key', 'test')// 子组件import { inject } from 'vue'// inject接收两个个参数 （注入名称，默认值）后者可不用
const msg = inject('key'，'hello')
console.log(msg)// 'test'

优缺点总结：

        props 的方式比较常用，但不适合多层级组件的参数传递，一层一层逐级传递很麻烦，还容易出错，改动也非常麻烦（改动顶层父组件的传递值名称 类型，下面的每个子组件都得更改接收值）

       provide / inject 的方式，适用于多层级组件的参数传递，顶层父级只需要注入要传递的参数，下面的某个层级子节点 inject接收该注入参数就可以了，不需要逐级传递参数

注意：不要滥用provide 和 inject，将所有的数据都注入到组件中去，会提升组件复杂性、混乱性