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>

请显示示例或安排，我的英语不是很好。谢谢。