Как я могу передать информацию о событии между компонентами на Vue.js

Question

Мне было поручено создать систему онлайн-заказа еды с использованием Vue.js.

Как вы можете видеть на моем JsFiddle , у меня есть список разделов меню , отображаемых в верхней части страницы.

Что янеобходимо выполнить следующее: при щелчке по разделу меню я хочу выполнить запрос ajax, получить полную информацию о разделе и передать ее компоненту menu-section-info.

Затем я также хочу узнать, нажал ли пользователь Добавить в избранное и передать его на запрос ajax.

Я знаю, как сделать ajax запросов,но я не знаком с событиями в vue.js и как их использовать для передачи информации между компонентами.

Похоже, я могу добавить атрибут 'v-on: click' к компоненту раздела меню или к элементу li внутри этого.Будет ли это правильный подход?и как мне передать детали раздела меню по щелчку в компонент menu-section-info?

Заранее спасибо

Vue.component('menu-section', {
    props: ['menusection'],
    template: '<li>{{ menusection.name }}</li>'
})

Vue.component('menu-section-info', {
    props: ['menusectioninfo'],
    template: '#menusectioninfo-template'
})

new Vue({
        el:'#app',
    data: {
            // this will be retrieved using an ajax request
        menuSectionList: [
            { id: 1, name: 'Pizzas' },
            { id: 2, name: 'Burgers' },
            { id: 3, name: 'Wraps' },
            { id: 4, name: 'Drinks' },
            { id: 5, name: 'Sweets' }
        ]
    }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
        <ol>
            <menu-section v-for="item in menuSectionList"
                        v-bind:menusection="item"
                        v-bind:key="item.id">
            </menu-section>
        </ol>

        <div style="margin-top:20px;">
         <!-- The info here has been hardcoded, it should be retrieved using an ajax request when one of the sections has been clicked. The favourites link should also make and ajax request passing the selected section. -->
          <menu-section-info menusectioninfo="We sell the best burgers in the world!"></menu-section-info>
        </div>
</div>

<script type="text/x-template" id="menusectioninfo-template">
  <div>
    <div>{{ menusectioninfo }}</div>
    <div><a href="#">Click here to add section to your favourites list</a></div>
  </div>
</script>