vue3祖孙组件之间传参，以及传参丢失数据类型

1.父组件

<template>
    <div class="app">
        <h2>祖孙组件之间传参provide-inject</h2>
        <h3>{
  { car.name }} -- {
  { car.price }}</h3>
        <Child/>
    </div>
</template>
<script lang="ts" setup>
// 防止传给孙组件时，类型丢失
import {injectKeyCar} from './injectionKey';//这是防止传参丢失的
import Child from '@/view/provide-inject/components/Child.vue';
import {provide, reactive} from 'vue';

const car = reactive({
    name:'奔驰',
    price:'40w'
})
// 像孙组件传数据
provide(injectKeyCar,car)
</script>

<style scoped>
.app{
    background-color: #666;
    padding: 10px;
}
</style>

2.孙组件

<template>
    <div class="son">
        <h2>我是孙组件, {
  { car.name }}-- {
  { car.price }}</h2>
    </div>
</template>
<script