Vue.js / Как получить доступ к функции в другом компоненте

Question

Я только начал изучать Vue.js. Мне нужно вызвать функцию в другом компоненте в моем проекте. Когда я добавляю новые данные в таблицу с помощью createAnnouncement.vue, я хочу перейти к announcement.vue и вызвать функцию queryAnnouncement. Как я могу это сделать? Буду признателен, если вы могли бы помочь, пожалуйста, объясните с образцом. Или отредактируйте мои коды.

Announcement.Vue шаблон:

    <template>
           // more div or not important template code
                <div class="dataTables_filter" style="margin-bottom:10px">
                    <label>
                        <input class="form-control form-control-sm" placeholder="Search" aria-controls="m_table_1" type="search" v-model="searchField" @change="filter()">
                    </label>
                    <a style="float:right" href="#" data-target="#create-announcement-modal" data-toggle="modal" class="btn btn-primary">
                        <i class="">Add</i>&nbsp;
                    </a>
                </div>

         // more div or not important template code
</template>

Announcement.Vue Код сценария:

<script>
import toastr from "toastr";
export default {
    name: 'announcement',
    data() {
        return {
            announcements: [],
            searchField: "",
            deleteCsrfToken: this.$root.csrfTokens["deleteAnnouncement"]
        }
    },
    beforeMount: async function () {
        await this.queryAnnouncements();
    },
    methods: {
        filter: async function () {
            await this.queryAnnouncements(this.searchField);
        },
        queryAnnouncements: async function (filter, pageSize, pageIndex, sortBy, sortType) {
            var data = {
                "query[general-filter]": filter,
                "pagination[perpage]": !!pageSize ? pageSize : 10,
                "pagination[page]": !!pageIndex ? pageIndex : 1,
                "sort[field]": sortType,
                "sort[sort]": !!sortBy ? sortBy : "asc"
            };
            let response = await axios
                .get("/Announcement/QueryAnnouncements", { params: data })
            this.announcements = response.data.data;
        }, 
    }
}

createAnnouncement.vue код:

  <template>
     <button @click="createAnnouncement()" v-bind:disabled="contentDetail === ''" class="btn btn-success">
    Save</button>

    //not important template codes
    <template>
    <script>
    import toastr from "toastr";
    export default {
        name: 'create-announcement',
        data() {
            return {
                contentDetail: "",
                createCsrfToken: this.$root.csrfTokens["createAnnouncement"],
            }
        },
        methods: {
            createAnnouncement: async function () {
                var self = this;
                var data = {
                    content: this.contentDetail,
                };
                let response = await axios
                    .post("/Announcement/createAnnouncement",
                        data,
                        {
                            headers: {
                                RequestVerificationToken: self.createCsrfToken
                            }
                    })
                if (response.status == 200) {
                    $("#create-announcement-modal .close").click()
                    $("#create-announcement-form").trigger('reset');
                    toastr["success"]("Kayıt başarıyla eklendi!", "Başarılı!");
                    self.contentDetail = "";
                }
                else {
                    toastr["warning"]("Hata", "Kayıt Eklenemedi.");
                }

            }
        },

    }
</script>

Пожалуйста, покажите с образцом или расположением, мой английский не очень хорош. Спасибо.