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方法 } }