vue+ts 父组件给子组件传值,子组件数据只更新一次,之后父组件数据更新,子组件不再更新
父子组件传值,当父组件的数据发生变化的时候,子组件的数据应该也同步更新。一开始我发现父组件的数据更新了但是视图没有更新,最开始想到的解决办法就是用nextTick forceUpdata 但是都没有效果。在子组件打印父组件传的值发现子组件并没有接收到只是在第一次的时候打印了 之后父组件数据再更新都没有打印。于是百度了一番,需要在子组件watch(监听)父组件数据的变化,成功了接收到了父组件传过来的val,但是又出现了一个问题就是子组件接收到了变化,但是赋值并没有成功( this.resultList = val)?对应的视图依然没有更新??忽然我发现我子组件接收的是一个对象。对象的watch就需要深度监听啦啦啦啦
父组件
<template>
<result-list
:result-list="searchList" /
</template>
<script>
@Watch('searchList')
changeSearchList (val,oldVal) {
this.searchList = val
}
</script>
子组件
<script>
@Prop({
type: Object,
default () {
return []
}
}) private resultList!: ResultListData
@Watch('resultList', {deep:true})
changeResultList (val,oldVal) {
this.resultList = val
this.getResultList()
}
</script>