如何使用 Vue.js 路由器将状态和事件处理程序作为道具传递给子组件？

Posted 2023-02-23

【中文标题】如何使用 Vue.js 路由器将状态和事件处理程序作为道具传递给子组件？

【英文标题】：How to pass state and events handlers as props to children components with Vue.js's Router?

【发布时间】：2020-06-04 21:56:11

【问题描述】：

在使用路由之前，我有以下Dashboard 组件：

<template>
  <div>
    <RegistrationForm v-on:add-employee="addEmployee" />
    <EmployeeTable
      v-bind:employees="employees"
      v-on:delete-employee="deleteEmployee"
    />
  </div>
</template>
<script>
...
export default 
  components: 
    EmployeeTable,
    RegistrationForm
  ,
  data() 
    return 
      employees: []
    ;
  ,
  methods:
    deleteEmployee() ...
    addEmployee() ...
  

</script>

我想必须分开一条用于注册新员工的路线和一条用于列出所有员工的路线，所以我首先要做的是更新上面的模板：

<template>
  <div>
    <router-view/>
  </div>
</template>

然后我定义了一个路由器对象：

export default new Router(
    mode: 'history',
    routes: [
        
            path: "/dashboard",
            name: "dashboard",
            component: Dashboard,
            children: [
                
                    path: 'add-employee',
                    component: RegistrationForm, 
                ,
                
                    path: 'list-employees',
                    component: EmployeeTable, 
                
            ]
        
    ]
);

我的问题是如何将employees 状态变量和deleteEmployee、addEmployee 方法从Dashboard 组件传递给它的子组件？

更新： 我不知道为什么我没有收到关于这个问题的任何回复，尽管这是在其他框架中常见且微不足道的任务，例如在React：

...
export default function BasicExample() 
  const [x, setX] = useState("World");
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path="/">
            <Home x=x/>
          </Route>
        </Switch>
      </div>
    </Router>
  );


function Home(x) 
  return (
    <div>
      <h2>Hello x</h2>
    </div>
  );

【参考方案1】：

在使用Vue-router一小段时间后，我得出结论，这不是限制，更像是一个设计决定：

React-router：更像是一个条件渲染器，例如从父组件内部并基于当前路径，渲染合适的子组件。

Vue-router：更像是一种布线解决方案。

另外我不得不说：使用 Vue-router 可以实现与 React-router 类似的行为。这是通过将路由器的 currentRoute property 与 v-if 指令结合起来，真正从 DOM 中插入/删除组件（而不是像 v-show 那样使用 css 隐藏它）。

最后：分离路线配置是有利的，因为它产生了更多的模块化项目和更好的 SPA。当然，这种分离可以在 Vue-router 和 React-router 中完成（查看here for React-router）。