Vue父组件修改了通过 props传递给子组件的数据，子组件没有及时更新（总是慢一步）

本文链接：https://blog.youkuaiyun.com/m0_50664127/article/details/125007137

本文介绍了一个具体的Vue.js应用案例，展示了如何通过使用$nextTick方法来确保子组件正确接收父组件传递的数据，并实现了界面更新的同步。文章还探讨了在特定场景下使用$nextTick的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没写过文章，也没有打算成为博主的打算，只把自己的问题和解决办法做一个分享，欢迎指出不足和更优秀的解决办法。

使用：.$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>