Vue中的嵌套组件中数据无法实时更新的问题

蚊子前端博客
发布于 2018-10-10 18:31
Vue中的嵌套组件中数据无法实时更新的问题

我们在工作经常会有组件嵌套的情况,内部组件通过props获取传递进来的数据。不过在实际应用中发现,外部组件的数据更新后,内部组件的数据不会实时更新:

子组件:

COPYHTML

<!-- unit.vue --> <template> <div> <p>姓名: {{user.name}}</p> <p>年龄: {{user.age}}</p> </div> </template> <script> export default { props: { user: Object } } </script>

父级组件:

COPYHTML

<!-- list.vue --> <template> <div> <unit v-for="(item, index) in users" :key="index" :user="item"></unit> </div> </template> <script> import unit from './unit'; export default { components: { unit }, data(){ return { users: [ { name: 'wenzi', age: 27 }, { name: '蚊子', age: 26 } ] }; } } </script>

这么个组件运行是没有问题的,能够正确渲染出一个列表。

可是如果list.vue中的users发生变化时,unit.vue里的数据是不会再次更新的。这样的情况怎么解决呢?

解决方案1: 将两个组件合并成一个组件

最简单、最粗糙的方式,将两个组件合并成一个组件,在一个组件内进行数据更新,就不会出现组件之间数据不同步的问题了。

不过这样的的问题就是,当前组件会很大,本来我们就是为了解耦功能,才要拆分组件的,不能再次回到过去吧。

解决方案2: watch

在unit.vue组件中,使用watch监听某个属性的变化,这样外部的数据发生变化时,watch就能监听到:

COPYJAVASCRIPT

watch: { 'user.age': function(val, oldVal){ this.render(); // user中的age属性发生变化时,调用render方法 } }
标签:
阅读(3570) 评论(0)

公众号:

qrcode

微信公众号:前端小茶馆