Vue中一個(gè)組件調(diào)用其他組件的方法詳解(非父子組件)
前言
Vue中，一個(gè)組件調(diào)用其他組件的方法（非父子組件）
場(chǎng)景——B頁面（組件）想調(diào)用 A頁面(組件)中的方法；但是兩個(gè)頁面（組件）毫無關(guān)聯(lián)（刷新 A的數(shù)據(jù)）。
方式一：引用式
1、當(dāng)前組件引入將要調(diào)用方法所屬的組件
這里我的當(dāng)前組件要調(diào)用OrderDetail這個(gè)組件的check()方法
import Detail from "./detail.vue";
該方法定義在OrderDetail的methods屬性中
2、當(dāng)前組件通過該組件methods屬性直接調(diào)用該方法
// 也可以調(diào)用 created、data等 Detail.methods.check();
方式二：vuex
使用 VueX 定義一個(gè)屬性 ，然后在A頁面 定義一個(gè)計(jì)算屬性（computed） 再把 vuex 的屬性返回給它，再監(jiān)聽這個(gè)計(jì)算屬性，發(fā)生變化就調(diào)用你要執(zhí)行的方法。
1、src/store/index.js
// Vuex 全局
state: {
tableStatus:false
}
mutations:{
changeStatus(state,status) { // 重復(fù)賦值
state.tableStatus = status;
},
}
2、被使用組件- A 頁面（組件）
// A 頁面（組件）
computed: {
status() { // 計(jì)算屬性
return this.$store.state.tableStatus; // Vuex 中定義的屬性
}
},
watch:{
status() {
this.getTableList(); // 需要調(diào)用的方法
}
},
3、使用觸發(fā)頁面-B 頁面（組件）
然后就是在B 頁面定義一個(gè)點(diǎn)擊事件（舉例），重新給 Vuex中的屬性賦值就行了
// B頁面（組件）
closePage() {
let status = this.$store.state.tableStatus; // 重新賦值
this.$store.commit("changeStatus", !status);
},
方式三：使用事件總線eventBus定義全局事件
1、src/main.js
window.eventBus = new Vue();
2、觸發(fā)頁面-B組件/發(fā)布事件
window.eventBus.$emit('setFeaturesData', data) // 帶參數(shù)
window.eventBus.$emit('setFeaturesData') // 不帶參數(shù)
3、接收頁面-A組件/訂閱事件
window.eventBus.$on('setFeaturesData', (data)=>{ // 帶參數(shù)
this.hoveredFeatures = [data]
this.onClick()
})
mounted() {
this.getTableData()
window.eventBus.$on('setFeaturesData', ()=>{ // 不帶參數(shù)
this.getTableData()
})
},
4、移除事件
window.eventBus.$off('setFeaturesData')總結(jié)
到此這篇關(guān)于Vue中一個(gè)組件調(diào)用其他組件(非父子組件)的文章就介紹到這了,更多相關(guān)Vue組件調(diào)用其他組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue3父子組件互調(diào)方法的實(shí)現(xiàn)
- Vue實(shí)現(xiàn)父子組件頁面刷新的幾種常用方法
- vue3?父子組件間相互傳值方式
- 關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題)
- vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
- 淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定
- Vue父子組件傳值的三種方法
- vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問題詳解
- Vue父子組件數(shù)據(jù)雙向綁定（父?jìng)髯?、子傳父）及ref、$refs、is、：is的使用與區(qū)別
相關(guān)文章
這篇文章主要介紹了Vue 前端導(dǎo)出后端返回的excel文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無限循環(huán)的問題解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Vue中v-form標(biāo)簽里的:rules作用及定義方法
文章介紹了在Vue項(xiàng)目中使用ElementUI或ElementPlus組件庫時(shí),如何通過`el-form`標(biāo)簽的`:rules`屬性進(jìn)行表單驗(yàn)證,`:rules`屬性用于定義表單項(xiàng)的驗(yàn)證規(guī)則,包括必填項(xiàng)、格式校驗(yàn)、長(zhǎng)度限制等,文章還展示了如何定義基本驗(yàn)證規(guī)則和自定義驗(yàn)證函數(shù),感興趣的朋友一起看看吧2025-03-03
利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0，感興趣的朋友一起看看吧2022-06-06
vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼
本文主要介紹了vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue使用pdfjs顯示PDF可復(fù)制的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用pdfjs顯示PDF可復(fù)制的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12