如何在子组件和父组件之间捕获或同步道具值？

Posted 2023-02-23

【中文标题】如何在子组件和父组件之间捕获或同步道具值？

【英文标题】：How to catch or sync props value between child and parent component?

【发布时间】：2021-12-31 21:14:55

【问题描述】：

目前我正在开发 vuejs 3，并且我开发了自己的数据表组件，它运行良好。现在我只是想用另一个特性来扩展这个数据表，即动态地我想添加一个“状态列”，其中一个道具值将根据条件进行更新，并且我想捕捉到更新后的道具值我的子组件。

子组件代码：

<data-table
  :rows="state.rows"
  :columns="state.columns"
  :num_to_show="state.num_to_show"
  styleClass="tableOne vgt-table"
> 
  // Below code passing to parent component and want to get back calculated 
  props(progress_val) value from parent
  <template #progress-bar >
    <progress-bar :progress="progress_val">
    </progress-bar>
  </template> 
</data-table>

父组件代码：

// 这里progress_val 计算正确并且这个值想被捕获 子组件

【参考方案1】：

得到了解决方案，刚刚更新了我的代码，如下所示： //在下面的代码中接收到返回的道具

<template #progress-bar="progress_val, color" >      
    <progress-bar :progress="progress_val" :color="color">
    </progress-bar>
</template>