vue中同级页面调用另一个页面的方法
问题:在vue前端项目开发时,需要从一个页面中调用另一个页面(同级组件)中的方法,这两个页面没有直接的关系,就像是在layout中的头部和内容区域的组件,需要在内容区域操作数据后调用头部组件中的方法。解决:在vue中官方已经给提供解决方法了:下面是我具体的实现首先创建一个工具随便命名,我的是 siblingCall.jsimport Vue from "vue"export default new
·
问题:
在vue前端项目开发时,需要从一个页面中调用另一个页面(同级组件)中的方法,这两个页面没有直接的关系,就像是在layout中的头部和内容区域的组件,需要在内容区域操作数据后调用头部组件中的方法。
解决:
在vue中官方已经给提供解决方法了:
下面是我具体的实现
首先创建一个工具随便命名,我的是 siblingCall.js
import Vue from "vue"
export default new Vue;
在两个同级页面都引入定义的工具
首先在需要调别的组件中的方法的页面
// 首先引入 @/utils/siblingCall是我的路径,根据自己的文件所在目录填写路径
import siblingCall from "@/utils/siblingCall";
// 在methods中写一个方法,此方法就可以调用另一个页面中的方法
methods: {
siblingMessage(){
// TriggerGetMsgNum是事件名字,TriggerGetMsgPara是参数()
// 也可以没有参数,直接写成siblingCall.$emit("TriggerGetMsgNum");
siblingCall.$emit("TriggerGetMsgNum","TriggerGetMsgPara");
},
}
被调用方法的页面
首先引入
import siblingCall from "@/utils/siblingCall";
// 在钩子函数中
mounted() {
// TriggerGetMsgNum与上面的定义一致,TriggerGetMsgPara函数的参数
// 如果是无参的siblingCall.$on("TriggerGetMsgNum",() => {
siblingCall.$on("TriggerGetMsgNum",(TriggerGetMsgPara) => {
this.GetMessageNum();
})
},
这样就完成了同级(姐妹)组件的方法调用
更多推荐
已为社区贡献1条内容
所有评论(0)