Pfthb

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.