Vue中一个组件调用其他组件的方法详解(非父子组件)
更新时间：2022年10月27日 12:12:18 作者：viceen
vue中最常见子父组件产值,大家一定都很熟悉,最近项目中碰到非父组件中调用子组件方法的问题,这篇文章主要给大家介绍了关于Vue中一个组件调用其他组件的方法(非父子组件),需要的朋友可以参考下
前言
Vue中，一个组件调用其他组件的方法（非父子组件）
场景——B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）。
方式一：引用式
1、当前组件引入将要调用方法所属的组件
这里我的当前组件要调用OrderDetail这个组件的check()方法
import Detail from "./detail.vue";
该方法定义在OrderDetail的methods属性中
2、当前组件通过该组件methods属性直接调用该方法
// 也可以调用 created、data等 Detail.methods.check();
方式二：vuex
使用 VueX 定义一个属性 ，然后在A页面 定义一个计算属性（computed） 再把 vuex 的属性返回给它，再监听这个计算属性，发生变化就调用你要执行的方法。
1、src/store/index.js
// Vuex 全局
state: {
tableStatus:false
}
mutations:{
changeStatus(state,status) { // 重复赋值
state.tableStatus = status;
},
}
2、被使用组件- A 页面（组件）
// A 页面（组件）
computed: {
status() { // 计算属性
return this.$store.state.tableStatus; // Vuex 中定义的属性
}
},
watch:{
status() {
this.getTableList(); // 需要调用的方法
}
},
3、使用触发页面-B 页面（组件）
然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了
// B页面（组件）
closePage() {
let status = this.$store.state.tableStatus; // 重新赋值
this.$store.commit("changeStatus", !status);
},
方式三：使用事件总线eventBus定义全局事件
1、src/main.js
window.eventBus = new Vue();
2、触发页面-B组件/发布事件
window.eventBus.$emit('setFeaturesData', data) // 带参数
window.eventBus.$emit('setFeaturesData') // 不带参数
3、接收页面-A组件/订阅事件
window.eventBus.$on('setFeaturesData', (data)=>{ // 带参数
this.hoveredFeatures = [data]
this.onClick()
})
mounted() {
this.getTableData()
window.eventBus.$on('setFeaturesData', ()=>{ // 不带参数
this.getTableData()
})
},
4、移除事件
window.eventBus.$off('setFeaturesData')总结
到此这篇关于Vue中一个组件调用其他组件(非父子组件)的文章就介绍到这了,更多相关Vue组件调用其他组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue 前端导出后端返回的excel文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
关于vue-router的beforeEach无限循环的问题解决
本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
文章介绍了在Vue项目中使用ElementUI或ElementPlus组件库时,如何通过`el-form`标签的`:rules`属性进行表单验证,`:rules`属性用于定义表单项的验证规则,包括必填项、格式校验、长度限制等,文章还展示了如何定义基本验证规则和自定义验证函数,感兴趣的朋友一起看看吧2025-03-03
轮播图是前端很常用的一个网页特效，几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了Vue中的baseurl如何配置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法
今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0，感兴趣的朋友一起看看吧2022-06-06
本文主要介绍了vue实现iview表格添加筛选功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了Vue3源码分析组件挂载初始化props与slots实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue使用pdfjs显示PDF可复制的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论