vue父组件改变子组件数据

最新推荐文章于 2025-05-07 09:46:46 发布

原创最新推荐文章于 2025-05-07 09:46:46 发布 · 3.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

vue 专栏收录该内容

6 篇文章

订阅专栏

本文解决了一个常见的Vue开发问题：如何实现实时更新从父组件传递到子组件的数据。通过使用watch监听器，确保了父组件数据变化时子组件能够立即响应。

业务场景
vue父组件向子组件通信，父组件数据改变，子组件数据并未发生改变

解决方案
起初我是父组件通过props传值，但是发现只有组件第一次加载时才能传值，通过事件改变的父组件值并不会再通过过props传递，也就是说props只有加载组件时才会工作，并不会根据值改变动态操作

后面，通过vue通过监听父组件传过来的值，来改变子组件的值

子组件代码


<script>
export default {
    props:{
        data:{
            type:Array
        }
    },
    data(){
        return{
            list:[]
        }
    },
    mounted() {
        //data为父组件传过来的数据
        this.list = this.data
    },
    watch:{
        data:{
            immediate: true, 
            handler(val) {
                this.list = val;
            }
        }
    }
    
}
</script>

父组件代码

<template>
    <div>
        <!-- 一定要v-if,否则子组件已经渲染了，却没有数据 -->
        <app-main v-if="dataList.length>0" :data="dataList"></app-main>
    </div>
</template>

<script>
import { AppMain } from '@/components/AppMain';
export default {
  name: "user",
  components: {
    AppMain
  },
  data(){
      return{
          dataList: []
      }
  }
};
</script>