业务场景
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> 
Logo

前往低代码交流专区

更多推荐