如何通过Vue.js的Router将状态和事件处理程序作为道具传递给子组件？

Question

使用路由之前，我具有以下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>
  );
}

Answer 1

在短时间内使用

Vue-router