Vue.js中如何将点击事件向上传递两级至父组件

你的场景是三层组件嵌套：Admin → TableView → filterForm，要在最底层的filterForm点击清除按钮时触发顶层Admin里的测试函数，核心方案就是逐层向下传递回调函数，具体实现步骤如下：

1. 在Admin组件中传递回调给TableView #

先在Admin里定义好测试函数，再把它作为props传给TableView组件：

// Admin组件
function Admin() {
  const testFunction = () => {
    // 这里写你要执行的逻辑
    console.log("执行Admin里的测试函数");
  };

  return (
    <div>
      <TableView onFilterClear={testFunction} />
    </div>
  );
}

2. 在TableView组件中转递回调给filterForm #

TableView接收Admin传过来的onFilterClear，再把它作为props继续传给filterForm：

// TableView组件
function TableView({ onFilterClear }) {
  return (
    <div>
      <filterForm onClear={onFilterClear} />
      {/* 其他表格相关代码 */}
    </div>
  );
}

3. 在filterForm组件中调用回调 #

在filterForm的清除按钮点击事件里，直接调用传入的onClear回调即可：

// filterForm组件
function filterForm({ onClear }) {
  return (
    <div>
      {/* 其他表单元素 */}
      <button onClick={onClear}>清除</button>
    </div>
  );
}

可选优化：组件层级更深时的方案 #

如果后续组件层级变多，逐层传props会显得繁琐，可以用React Context全局传递回调，或者使用状态管理工具（比如Redux），但当前三层结构下，逐层传props是最直接简单的方案。

内容的提问来源于stack exchange，提问作者acrisvall