vue3+ts深度监听props的值，父子数据实时更新

props是vue中用于父传子数据的方法，当在子组件页面点击触发父组件值改变的按钮的时候，在子组件写一个watch深度监听方法即可。

父组件:

<template>
  <div style="display: block;">
    <el-row :gutter="8" style="width: 100%;">
      <el-col :span="4" :xs="24">
        <div style="height:770px;overflow-y:auto;overflow-x:hidden; margin-top: 8px">
           <el-button plain icon="ele-DataLine" @click="change"> 修改数据 </el-button>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div >
            <div>
              <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                <el-form :model="queryParams" ref="queryForm" :inline="true">
                </el-form>
              </el-card>
              <el-card style="height:700px;overflow-y:auto;overflow-x:hidden;">
                <tbimage :data="tableData" ></tbimage>
              </el-card>
            </div>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import tbimage from './tbimage.vue';
const tableData = ref(11)
const change= () => {
tableData.value  = 22
};
</script>

子页面tbimage

<template>
   <div>{{List}}</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const List = ref([])as any
const props = defineProps({
  data: {
    type: String,
    default: ''
  }
});
watch(
    () => props.data,
    (newProps:any) => {
        List.value = newProps
        console.log(List.value,"数据有更新哦");
        
    }
);
</script>