父传子点击子件按钮显示未完成任务数量

当你在构建一个用户界面应用程序时，可能会有这样的场景：一个父组件拥有一个列表或者卡片视图，每个子组件（通常是一个按钮或者其他交互元素）代表一个未完成的任务。当用户点击某个子组件时，该子组件会触发一个事件，通过这个事件将选中的任务传递给父组件。

在JavaScript的React库或其他类似的MVVM框架中，例如Vue.js，你可以这样做：

1. **父组件**：可以定义一个状态（state）来存储所有未完成任务的总数，然后给每个子组件一个`onClick`事件处理器，这个处理器将当前被点击的任务信息发送给父组件。

// ParentComponent.js
import TaskItem from './TaskItem';

function ParentComponent({ tasks }) {
  const [uncompletedTasksCount, setUncompletedTasksCount] = React.useState(0);

  function handleTaskClick(task) {
    setUncompletedTasksCount(tasks.filter(t => !t.completed).length);
  }

  return (
    <div>
      {tasks.map((task, index) => (
        <TaskItem key={index} task={task} onClick={() => handleTaskClick(task)} />
      ))}
      <span>未完成任务数：{uncompletedTasksCount}</span>
    </div>
  );
}

2. **子组件**：接收一个`onClick`事件处理函数，并在被点击时调用它。

// TaskItem.js
function TaskItem({ task, onClick }) {
  return (
    <button onClick={onClick}>
      {task.title} (已完成: {task.completed ? '否' : '是'})
    </button>
  );
}

当用户点击一个任务按钮时，子组件的`onClick`会被调用，更新父组件的状态，进而动态地显示未完成任务的数量。