vue父组件值改变刷新子组件,vue子组件更新父组件数据
很多时候，我们在操作页面的时候，尤其是添加、删除、修改之后，数据都会发生变化。主要介绍几种常见的Vue刷新亲子组件页面的方法，有一定的参考价值，感兴趣的朋友可以参考一下。
:
目录
1.重新加载原始页面(不推荐)2。使用空白页作为过渡3。使用提供/注入组合来控制显示器4。v-on:param父组件监视子组件事件。参考文档：很多时候，我们在操作页面的时候，尤其是添加或者删除之后，数据会发生变化。此时，我们希望返回的接口中的数据与数据库中的数据同步，因此需要刷新当前页面。如果使用ajax，我们可以使用异步请求来部分刷新页面。Vue常用的几种刷新页面的方法如下：
1、原地页面重新加载（不推荐）
这个。$router.go(0) //根据路由重定向到当前页面
或者
Location.reload() //重新加载当前页面
以上两种方法都可以同步数据，但其实都是重载当前页面，刷新时屏幕会闪烁。如果当前页面初始化加载的数据或者请求很多，这种方法会严重影响效率和体验。
2、空白页面作为过渡
创建一个新的空白页组件empty.vue。单击“确定”首先跳转到此空白页，然后立即跳转回当前页面。
在要刷新的页面中，先引入空白页组件，然后添加路由跳转：
//引入空白页面组件
从“@/views/organization/empty.vue”导入空文件
//添加路由跳转
这个。$ router . replace({ path:/empty })；
这种方法和上面两种方法基本一样，一瞬间不会出现空白页(如果网络不好或者数据量大也有可能出现)，但是地址栏切换过程很快，数据量不大也可以使用。
3、使用Provide / Inject组合控制显示
详见官网指导文件。
通常，当我们需要将数据从父组件传递到子组件时，我们会使用props。想象一下这个结构：有一些深度嵌套的组件，而深度子组件只需要父组件的部分内容。在这种情况下，如果prop仍然沿着组件链向下传递，可能会很麻烦。
在这种情况下，我们可以使用一对提供和注入。无论组件层次有多深，父组件都可以充当所有子组件的依赖提供者。此功能有两部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。
这种方法最基本的Vue脚手架工程很容易实现：
在App.vue跟组件中定义变量和方法如下：
模板
div id=应用程序
路由器视图v-if=isShow/
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
Provide(){ //变量由父组件中的Provide提供，由子组件中的inject注入。
返回{
重新加载：this.reload
}
},
data(){
返回{
is:true//控制视图是否显示的变量。
}
},
方法：{
reload(){
this.isShow=false//先关闭它
这个。$nextTick(()={
This.isShow=true //再次打开它
})
}
}
}
/脚本
在子组件中使用inject注入根组件的reload方法：
模板
差异
div class=header
Button @click=update()刷新页面/按钮
/div
/div
/模板
脚本
导出默认值{
data(){
返回{
}
},
注入：[reload]，//注入根组件的reload方法
方法：{
update(){
this . reload()；
Console.log(刷新页面)
}
}
}
/脚本
不过我用的vue项目是基于webpack搭建的，整体项目结构有点不一样。花了很长时间才把它弄出来：
模板
div id=应用程序
路由器视图v-if=isRouterAlive/
/div
/模板
脚本语言
导入{
组件，
某视频剪辑软件
}来自“vue-property-decorator”
@组件({
名称：“应用程序”，
Provide() {//变量由父组件中的Provide提供，由子组件中的inject注入。
重新加载：this.reload
},
data() {
返回{
IsRouterAlive: true //控制视图是否显示的变量。
}
},
方法：{
reload() {
this.isRouterAlive=false //先关闭
这个. nextTick(()={
this.isRouterAlive=true //再打开
})
}
}
})
导出默认类扩展Vue {}
/脚本
子组件中注入重新加载：
脚本语言
导入{
updateStore，//更新门店信息
getStoresData，//获取门店列表信息
searchStore//根据门店编号和商户编号获取门店信息
}来自@/api/organization.ts
从" @/App.vue "导入应用程序
@组件({
组件：{
updateStore，
getStoresData，
搜索商店
}
})
/**
* 此处的默认输出是集成某视频剪辑软件类（和爪哇岛中定义实体类跟相似)
*/
导出默认类创建任务扩展Vue {
//此处注入relod
注入：[重载]；
私有异步ensureDialog() {
让RES=await更新存储(this。表单)
this.syncDialogVisible=false
if (res) {
这个message.success(修改成功);
}
//到达此处说明请求响应成功
这个。重载()；//此处调用根组件的再装方法
}
}
上述做法不生效，如果有大神知道哪个不对，还望不吝赐教。
4、v-on:param父组件监听子组件事件
我们知道某视频剪辑软件有一个特点，只要某视频剪辑软件实例中的数据属性值发生改变，页面中使用v型车或者：数据渲染绑定的数据也会随之改变，通常情况下展示数据的界面为父组件，需要对父组件中的某一条数据进行增删改查操作时，都会响应弹出一个组件框悬浮在父组件之上单独展示某一条数据的内容，而这个悬浮组件就可以看做是子组件。
所以我们只要在父组件中监听到子组件的行为事件，就可以在进行当前页面的局部数据刷新（非重新加载）。
父组件：index.vue
模板
div class=数据容器
h3门店管理/h3
埃尔表
:data=list
合适的
突出显示-当前行
:header-cell-style= { color: # 5373 E0 ，background:#f3f6fb}
style=宽度：100%
/el-table
addStore:对话框可见。sync=对话框可见 v-on:post= getList @ refresh list= getList /addStore
设置代码：对话框可见。sync= dialog visible 1 @ refresh list= getList :code= codes /set code
更新存储：对话框可见。sync= dialog visible 2 v-on:put= getList @ refresh list= getList :storeIds= storeId /更新存储
设置使用：对话框可见。sync= dialog visible 3 @ refresh list= get list @ getAppId= getAppIds /set use
分页v-show= total 0 :total= total :page。sync= pageNo :限制。sync= pageSize @ pagination= getList /
/div
/模板
脚本语言
从" @/视图/组织/addStore。vue "导入addStore
从" @/组件/分页/索引。vue "导入分页；
从" @/views/organization/setCode。vue "导入设置代码
从" @/views/organization/update store。vue "导入更新商店
从" @/views/organization/setUse。vue "导入设置用途
@组件({
组件：{
addStore，
分页，
setCode，
updateStore，
setUse
}
})
导出默认类扩展Vue {
个人分发名单：any[]=[]；
private pageNo:number=1；
私有pageSize:number=10；
私有总计：数字=0；
私有对话框可见：boolean=false
private dialog visible 1:boolean=false；
私有对话框可见2:boolean=false；
私有对话框可见3:boolean=false；
私有appId:string=" "；
私有代码：string=
private storeId:string=" "；
私有存储形式={
商店名称： ,
存储编号：""
}
私有表单={
总金额： ,
正文：""
}
已创建(){
this.getList()
}
私有异步获取列表(){
let data=await getStoresData(这个。pageno，this.pageSize，this.storeForm)
这个。列表=数据。物品；//查询到的门店列表
这个。总计=这个。列表。长度；//查询到的总记录数
}
}
/脚本
可以看到上述父组件中包含了以下子组件：
//新增门店子组件
addStore:对话框可见。sync=对话框可见 v-on:post= getList @ refresh list= getList /addStore
//更新门店子组件
更新存储：对话框可见。sync= dialog visible 2 v-on:put= getList @ refresh list= getList :storeIds= storeId /更新存储
下载新闻组清单方法的作用就是更新当前父组件要展示的数据：
私有异步获取列表(){
let data=await getStoresData(这个。pageno，this.pageSize，this.storeForm)
这个。列表=数据。物品；//查询到的门店列表
}
getStoresData方法：
//分页条件查询商户下门店
export const getStoresData=(pageNo:number，pageSize:number，data:any)=1
请求({
URL:`/merchant/my/stores/merchants/page？pageNo=$ { pageNo } pageSize=$ { pageSize }租户id=$ {用户模块。租户id } `，
方法： post ，
数据
})
渲染数据：
这个。列表=数据。物品；//查询到的门店列表
埃尔表
:data=list
合适的
突出显示-当前行
:header-cell-style= { color: # 5373 E0 ，background:#f3f6fb}
style=宽度：100%
/el-table
更新数据子组件updaStore.vue:
模板
el-dialog title=修改门店信息：可见。sync= syncDialogVisible @ open= opend
el-form :inline=false
El-表单-项目标签=门店名称：:label-width= formLabelWidth :rules=[{ required:true }]
埃尔输入v-model=form.storeName/el输入
/El-表单-项目
El-表单-项目标签=门店地址：:label-width=formLabelWidth
埃尔输入v-model=form.storeAddress/el输入
/El-表单-项目
El-表单-项目标签=门店编号：:label-width=formLabelWidth
埃尔输入v-model=form.storeNumber/el输入
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button @ click= syncDialogVisible=false 取消/el-button
El-button type= primary @ click=确保对话框确定/el-button
/div
/el-dialog
/模板
脚本语言
@组件({
组件：{
updateStore，
getStoresData，
搜索商店
}
})
导出默认类创建任务扩展Vue {
@PropSync(dialogVisible ，{
类型：布尔型，
默认值：错误
})
syncDialogVisible！布尔型
@PropSync(storeIds ，{
类型：字符串
})
storeId！字符串
私有表单={
id: 0，
商店地址： ,
商店名称： ,
商店编号：0,
parentId: 0，
存储状态："",
商品编号：0
}
私有存储形式={
商店编号： ,
存储名称：""
}
list:any[]=[]；
页码：number=1；
pageSize:number=10；
total:number=0；
私有过滤数据：any[]=[]；
private opend() {
这个。getlist()；
}
私有异步获取列表(){
设RES=等待搜索存储(this。storeid)；
这个。形式=结果结果；
}
私有异步ensureDialog() {
让RES=await更新存储(this。表单)
this.syncDialogVisible=false
if (res) {
这个message.success(修改成功);
}
}
}
/脚本
实际应用场景：
在子组件updateStore.vue中，点击确定修改，修改成功之后在当前组件中进行查询门店列表getStoresData:
私有异步ensureDialog() {
让RES=await更新存储(this。表单)
this.syncDialogVisible=false
if (res) {
这个message.success(修改成功);
}
//此处查询列表信息
让ret=await getStoresData(这个。pageno，this.pageSize，this。store form)；
这个。list=ret。物品；
这个。总计=这个。列表。长度；
}
根据理论，找到了修改后的存储列表，但它当前在子组件中。列表的范围与父组件index.vue的范围不同，所以父组件中的内容不会改变，会同步更新。我该怎么办？
如上所述，我们需要父组件来监控子组件的事件。当子组件完成相应的操作请求时，可以触发父组件监听的回调函数，使其父组件index.vue更新列表，刷新页面中的数据。
在父组件index.vue中：
//更新存储子组件
update store:dialog visible . sync= dialog visible 2 v-on:put= getList @ refresh list= getList :storeIds= storeId /update store
V-on:put=getList ，其中put是一个监控子组件的可触发事件，所以我们可以在子组件中完成put更新请求后触发该事件，让父组件完成渲染数据的同步更新。
此处完成同步更新有两种方式：
子组件直接触发父组件的监控事件，父组件查询列表信息，子组件在触发监控事件的同时将查询到的列表信息发送给父组件第一种方式：直接触发监听事件。
私有异步ensureDialog() {
let RES=await update store(this . form)
this.syncDialogVisible=false
if (res) {
这个。$message.success(修改成功)；
}
//触发父组件侦听事件put
这个。$ emit( put )；
}
//父组件侦听事件put
v-on:put=getList
//调用getList方法再次查询列表信息(这里this.list是渲染接口的绑定属性)，从而完成数据刷新，无需重新加载整个页面。
私有异步获取列表(){
let data=await getStoresData(this . pageno，this.pageSize，this.storeForm)
this . list=data . items；//查询店铺列表
this . total=this . list . length；//查询的记录总数
}
第二种方式：触发监听事件的同时传递数据
私有异步ensureDialog() {
let RES=await update store(this . form)
this.syncDialogVisible=false
if (res) {
这个。$message.success(修改成功)；
}
//在此检查列表信息
let ret=await getStoresData(this . pageno，this.pageSize，this . storeform)；
let=ret.items
=this . list . length；
//触发父组件监听事件put，同时传递数据(以下均为参数数据)
这个。$emit(put ，ret.items，ret . items . length)；
}
//父组件侦听事件put
v-on:put=getList
//根据子组件传递的数据进行同步更新渲染(该方法的参数列表数量应与被监控事件传递的参数数量一致)
私有异步获取列表(param1，param2) {
this.list=param1//列出子组件传递的数据
this.total=param2//子组件传递的列表记录数
}
AddStore.vue子组件也可以用这个方法来完成同步更新渲染。
参考文档：
$排放选项
Vue组件基础(监听子组件事件)
关于Vue的父子组件页面刷新的几种常用方法，本文就到这里了。更多相关Vue亲子组件页面刷新内容，请搜索我们之前的文章或者继续浏览以下相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。