vue父组件改变子组件数据
业务场景vue父组件向子组件通信,父组件数据改变,子组件数据并未发生改变解决方案起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作后面,通过vue通过监听父组件传过来的值,来改变子组件的值子组件代码<script>export de...
·
业务场景
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>
更多推荐
已为社区贡献2条内容
所有评论(0)