Vue父组件修改了通过 props传递给子组件的数据,子组件没有及时更新(总是慢一步)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
没写过文章,也没有打算成为博主的打算,只把自己的问题和解决办法做一个分享,欢迎指出不足和更优秀的解决办法。
使用 :.$nextTick()
父组件:
<template>
<section>
<el-container >
<el-aside width="20%" style="background-color: rgb(255,255,255);margin-bottom:1%">
<el-card class="box-card" style="margin-bottom:1%">
<el-scrollbar>
<div v-for="o in data" :key="o.id" class="text item" style="margin-bottom:1%">
<el-button type="text" @click="showData(o.id)" >{{o.batch_name }}</el-button>
</div>
</el-aside>
<el-main width="80%" style="margin-top: -1%">
<!--放组件-->
<percentags-tags ref="ref名称" v-if="show" :batchId="this.batchId">
</percentags-tags>
<p v-else class="textShow index_main" >请先在左侧选择!</p>
</el-main>
</el-container>
</section>
</template>
<script>
//导出子组件 @是定位到str.
import percentagsTags from "@/views/data";
export default {
//声明子组件
components: {
percentagsTags
},
name: "data",
data() {
return {
show:false,
batchId:'',
data:[]
}
},
methods: {
showData(batchId){
this.batchId = batchId,
this.show = true
//我并不理解$nextTick()方法,同志们明白的话可以评论一下。在不加此方法前,子组件总是慢一步。
this.$nextTick(() => {
this.$refs.ref名称.子方法()
})
},
$init() {
//这里是获取data的方法,和本文无关。方法内容省略
this.data = data
},
}
}
</script>
<style scoped>
.textShow{
font-size:;
color:;
font-weight:;
}
.text {
font-size: ;
}
.item {
padding: ;
}
.box-card {
width: ;
}
</style>
子组件:
<template>
<section>
<div class="index_main" >
//中间代码不重要,个人业务实现。
</div>
</section>
</template>
<script>
export default {
name: "index",
//接值
props: {
batchId: String
},
data() {
return {
//声明一个接值的方法,我个人喜欢吧传来的值给自己的值,不是去修改传来的值,
businessId:'',
data: {}
}
},
methods: {
子方法() {
console.log(this.batchId)
this.businessId=this.batchId
/业务代码
},
}
</script>
<style scoped>
</style>
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐



所有评论(0)