Vfrdtyky

I just started learning Vue.js. I need to call the function in another component in my project. When I add new data to the table with createAnnouncement.vue, I want to go into announcement.vue and call the queryAnnouncement function. How can I do that? I would appreciate if you could help, please explain with a sample. Or edit my codes.

Announcement.Vue template:

    <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 Code:

<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 code:

  <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>

Please show with sample or arrangement, my english is not very good. Thanks.