177大高个 2022-04-09 23:57 采纳率: 25%
浏览 959

vue3中,在setup语法糖的子组件中怎么使用watch监听defineProps接收父组件的值的变化?

子组件:
<template>
  <div>我是子组件</div>
</template>
<script setup>
//接收父组件传值
const props = defineProps({
  editData: {
    type: Object,
  },

//子组件怎么监听defineProps接收的父组件的editData的值的变化????

});
</script>


父组件:
<template>
<el-table
            :data="data.tableData"
            size="small" 
        style="width: 100%"
          >
            <el-table-column label="名称" align="center">
              <template #default="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="年龄" align="center">
              <template #default="scope">
                <span>{{ scope.row.age}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template #default="scope">
                <el-button type="text" @click="handleEdit(scope.row)" class="buttonMargin">
                  <i class="el-icon-edit"></i>编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
  <child :editData="data.editData"></child>
</template>
<script setup>
import { reactive } from 'vue'
import childfrom '@/components/child.vue'
 const data=reactive({
        tableData:[
            {name:"张三",age:15},
            {name:"李四",age:16},
           {name:"王五",age:17},
          ],
      editData:{}
  })
const handleEdit = (row) => {
  data.editData=row
}
</script>
  • 写回答

3条回答 默认 最新

  • cynl7 2022-04-12 16:01
    关注

    我也遇到了这个问题,想问一下,你是怎么解决的啊

    评论

报告相同问题?

问题事件

  • 创建了问题 4月9日

悬赏问题

  • ¥100 复现论文:matlab仿真代码编写
  • ¥15 esp32驱动GC9A01循环播放视频
  • ¥15 惠普360g9的最新bios
  • ¥30 这个功能用什么软件发合适?
  • ¥60 微信小程序,取消订单,偶尔订单没有改变状态
  • ¥15 用pytorch实现PPO算法
  • ¥15 关于调制信号的星座图?
  • ¥30 前端传参时,后端接收不到参数
  • ¥15 这是有什么问题吗,我检查许可证了但是显示有呢
  • ¥15 机器学习预测遇到的目标函数问题