Как передать данные из дочернего компонента в родительский?

Здравствуйте, товарищи! Помогите пожалуйста разобраться cо структурой во Vue.js приложении.

Есть два компонента. Первый называется YandexMap (родительский), второй Navbar (дочерний).

В компоненте YandexMap я инициализирую карту, делаю запрос к API через пакет axios по определенному url адресу и полученные результаты наношу на карту.

Сейчас возник вопрос. При нажатии кнопки в дочернем компоненте Navbar, мне нужно отправить данные (в моем случаи начальную и конечную дату) в родительский компонент YandexMap. Эти данные я хотел бы использовать в url адресе к API, чтобы построить новые гео-объекты. Как это сделать и насколько текущая организация кода правильная?

Второй вопрос при нажатии вышеупомянутой кнопку, мне нужно почистить яндекс карту, которая инициализирована в родительском компоненте. Как это сделать? Подскажите пожалуйста.

YandexMap.vue:

<template>
    <div>
        <Navbar/>
        <div id="yandex-map"></div>
        <Preloader v-if="loading"/>
    </div>
</template>

<script>
    import axios from 'axios';

    import Preloader from './Preloader.vue'
    import Navbar from './Navbar.vue'

    export default {
        name: "YandexMap",
        components: {
            Preloader,
            Navbar
        },
        data() {
            return {
                loading: false
                start_date: "2018-10-01"
                end_date:"2018-10-31"
            }
        },
        mounted() {
            // Установить скрипты для использования яндекс карты
            let scriptYandexMap = document.createElement('script');
            scriptYandexMap.setAttribute('src', 'https://api-maps.yandex.ru/2.1/?apikey=key&lang=ru_RU');
            document.head.appendChild(scriptYandexMap);

            // Инициализировать яндекс карту и установка гео-объектов на карте
            scriptYandexMap.addEventListener("load", this.geoObjects);
        },
        methods: {
            geoObjects() {
                    // Создаем карту
                    self.map = new ymaps.Map("yandex-map", {
                        center: [48.583213, 66.017493],
                        zoom: 5,
                        controls: ['zoomControl', 'searchControl', 'fullscreenControl' ],
                        searchControlProvider: 'yandex#search'
                    });

                    // Показать Preloader
                    self.loading = true;

                    // Выполняем запросы
                    axios.all([
                        axios.get('http://localhost:3000/api/markers?start_date=' + self.start_date + '&end_date=' + self.end_date),
                        axios.get('http://localhost:3000/api/polygons?start_date=' + self.start_date + '&end_date=' + self.end_date)
                    ]).then(axios.spread(function (markers, polygons){
                        
                        // Здесь опустил код, который наносит гео-объекты на карту

                        // Убираю Preloader, после того как все гео-объекты нанеслись на карту
                        self.loading = false;
                    }));
            }
        }
    }
</script>

Navbar.vue:

<template>
    <b-navbar toggleable type="warning" variant="warning">
        <v-date-picker class='v-date-picker'
                       mode='range'
                       v-model='range'
                       :show-day-popover=false
                       is-double-paned
                       show-caps>
        </v-date-picker>

        <b-button class="search-btn" v-on:click="search">
            <font-awesome-icon :icon="faSearch"/>
        </b-button>
    </b-navbar>
</template>

<script>
    import Vue from 'vue';

    import VCalendar from 'v-calendar'
    import 'v-calendar/lib/v-calendar.min.css';

    import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
    import  faSearch from '@fortawesome/free-solid-svg-icons'

    Vue.use(VCalendar);

    export default {
        name: "Navbar",
        data() {
            return {
                range: {
                    start: null,
                    end: null
                },
                faSearch: faSearch
            }
        },
        components: {
            FontAwesomeIcon
        },
        methods: {
            search: function () {
                console.log(this.range.start); // Выбранное пользователем начальная дата
                console.log(this.range.end); // Выбранное пользователем конечная дата
            }
        }
    }
</script>