考虑这样一种情况，Vue 的父组件根据网络请求获取到数据后，动态更新到子组件的 props 上。
// 父组件 <template> <div class="parent"> <chart :info='info'/> </div> </template>
在子组件上把数据直接渲染到模型上即可。
// 子组件
<template>
<div class="child">
<ul>
<!-- 此处 info 来自 props -->
<li v-for="i in info" :key='i'>{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
props:['info'],
data () {},
}
</script>走到这一步，都很顺利，子组件能响应父组件的数据，进行动态更新。
但是，
实际项目中，往往要对子组件上接收到的数据进行操作处理，然后才能通过 data 渲染到页面上，这时就会发现，父组件上的数据变化，子组件不再能响应并及时更新了。
// 子组件
<template>
<div class="child">
<ul>
<!-- 此处 list 来自 data -->
<li v-for="i in list" :key='i'>{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
props:['info'],
data () {
return {
list:[],
}
},
mounted(){
this.list = this.info.map(i => '0_'+i)
},
}
</script>原因很简单，从 props 的 info 传递给 data 的 list ，只有一次操作，就是在 mounted 中，往后即使 props 的 info 发生了变化，data 也接收不到。
问题在于数据在传递过程中不能及时关联，针对这一点，可以用 watch 来进行跟踪，如下即可
// 子组件
<template>
<div class="child">
<ul>
<!-- 此处list 来自 data -->
<li v-for="i in list" :key='i'>{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
props:['info'],
data () {
return {
list:[],
}
},
mounted(){
// this.list = this.info.map(i => '0_'+i)
},
watch: {
info() {
this.list = this.info.map(i => '0_'+i)
}
}
}
</script>后记：
以上操作其实也是走了一些弯路，对于这种 通过对 props 数据操作再赋值给 子组件 data ，导致子组件 data 不能根据 父组件传值变化而及时更新数据的情况。直接用计算属性 computed ： list
// 子组件
<template>
<div class="child">
<ul>
<!-- 此处comp 来自 computed -->
<li v-for="i in comp" :key='i'>{{i}}</li>
</ul>
</div>
</template>
<script>
export default {
props:['info'],
computed: {
comp (){
return this.info.map(i => '0_'+i)
}
},
}
</script>
川公网安备 51010702003150号
留下您的脚步
最近评论