Как передать обработчики состояний и событий в качестве реквизитов дочерним компонентам с помощью Vue. js?

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 в течение короткого периода времени я пришел к выводу, что это не ограничение, а скорее решение по проекту:

• React-router : больше похоже на условное средство рендеринга, например, из родительского компонента и на основе текущего пути, отображает дочерний элемент-компаньон.

• Vue -router : больше похоже на решение для подключения.

Также я должен сказать: поведение, подобное React-router может быть достигнуто с помощью Vue -router . Это путем объединения свойства currentRoute маршрутизатора с директивой v-if, которая действительно вставляет / удаляет компонент из DOM (не скрывая его, используя css как v-show do).

Наконец: выгодно конфигурировать разделительные маршруты, так как это дает больше модульного проекта и лучшего SPA. Конечно, это разделение может быть выполнено в Vue -router и React-router (смотрите здесь для React-router ).