Vue.js vueJS3-如何在来自同级组件的事件上触发函数

我想触发一个函数，该函数在按下同级组件中的按钮后，立即从组件中的http服务器获取数据

SignUpForm.vue有一个按钮可触发

customSubmit（）

customSubmit（）{
//发布到API
常量用户={
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify（{newUser:this.newUser}）
};
取回（“http://localhost:3080/api/user“，用户）
.then（response=>response.json（））
.then（data=>console.log（data））；
此.$emit（'refresh'，true）
这个.clearForm（）；
}

父组件的外观如下所示：

从“/components/SignUpForm.vue”导入注册表单；
从“/components/Datatable.vue”导入数据表；
从“/components/Exp copy.vue”导入Exp；
导出默认值{
名称：“应用程序”，
组件：{Datatable，SignUpForm，Exp}，
数据（）{
返回{
myRefresh:false，
};
},
方法：{
触发器刷新（bool）{
this.myRefresh=bool；
console.log（this.myRefresh）；
},
},
};

现在我需要兄弟组件Datatable.vue 当

在
SignUpForm.vue中触发此.$emit（'refresh'，true）
时，尽快从服务器获取
数据

下面是来自
Datatable.vue

导出默认值{
数据（）{
返回{
//列表调用器用户
userData:null，
//临时用户für das Details Feld
printUser:[{name:，email:，number:}]，
//“读取按钮”属性
showDetails:false，
//酒店“更新按钮”
只读：对，
};
},
道具：[“myRefresh”]，
方法：{
pushFunction（）{
取回（“http://localhost:3080/api/users")
.然后（（res）=>res.json（））
.然后（（数据）=>（this.userData=data））；
},
读取数据（k）{
this.printUser.length=0；
this.showDetails=true；
this.printUser.push（this.userData[k]）；
},
编辑数据（rowUser）{
如果（！rowUser.readOnly）{
rowUser.readOnly=true；
常量用户={
方法：“补丁”，
标题：{“内容类型”：“应用程序/json”}，
body:JSON.stringify（{userData:this.userData}），
};
取回（“http://localhost:3080/api/users/patch“，用户）
.then（（response）=>response.json（））
.然后（（数据）=>console.log（数据））；
}否则{
rowUser.readOnly=false；
}
},
删除数据（k）{
取回（“http://localhost:3080/api/users/“+k，{method:”删除“}）.catch(
（err）=>console.log（err）
);
此函数为.pushFunction（）；
},
//布莱瑞恩
切换高亮显示（行用户）{
if（rowUser.readOnly==false）{
返回；
}
rowUser.isHighlight=！rowUser.isHighlight；
},
向下滚动（）{
scrollTo（0，document.body.scrollHeight）；
},
},
安装的（）{
取回（“http://localhost:3080/api/users")
.然后（（res）=>res.json（））
.然后（（数据）=>（this.userData=data））；
},
};

我真的希望有人能帮助一个新手
 两个考虑因素，可能吗？这是谨慎的吗

可能吗？
是的，你可以通过两种不同的方式来实现它

这是谨慎的吗？
没有

如果你沿着这条路走下去，很可能架构是无效的。在理想的设置中，组件应该只负责管理视图。这意味着用户可以看到并收集他们的输入。业务逻辑不应该存在于组件中。因此，如果您有ajax调用之类的东西，并将它们放入组件中，那么您已经将逻辑与视图耦合起来了。一个可能的问题是，如果出于某种原因重新添加组件，任何正在进行的ajax调用都可能以意外的方式中断。虽然这样的场景可以处理，但更大的问题是，当您将业务逻辑与视图层耦合时，您正在创建一个越来越难以推理的应用程序；在同级组件之间发送事件时遇到的问题只是一个例子

其他选择
处理此问题的最常见方法（尽管不是唯一方法）是通过
Vuex
使用全局存储


您可以调用Vuex操作，而不是从组件初始化Ajax请求

该操作通常会使用单个状态变量（即
loadState=state.STARTED
）或使用
isLoading=true
）设置加载状态，除了不分配变量外，vuex会通过变异来完成，因此
store.commit（'setLoadState'，state.loading）
。这将更新直接或使用getter在存储中侦听更改的所有组件中的状态。然后发出ajax请求，完成后再次更新存储，要么使用
store.commit（'setLoadState'，STATE.ERROR）
，要么在成功时使用
store.commit（'setLoadState'，STATE.done）
和
store.commit（'setUsers'，response）
。然后您的组件只需要侦听更改，如果
$store.loadState==STATE.LOADING

只要后续调用的数据与特定于组件的数据（如特定用户ID或名称）相关，您就可以处理来自组件的下一个调用。您可以让组件
watch
vuex存储区或数据进行更改，而不是通过监视同级的事件来触发来自组件的第二个API请求。然后，当
$store.loadState
变为
STATE.DONE
时，您可以为另一个API调用触发另一个操作。不过，我只会在存在特定于API调用的任何部分数据的情况下这样做，否则，如果调用是在后面进行的话