问题描述:
在父组件中修改通过 props 传递到子组件的值后,通过 this.$refs 调用子组件的方法,发现子组件中取到的还是原先的值。
解决方案:
- 在子组件中使用 watch 监听属性的变化,执行对应操作。
- 将 this.$refs 调用方法的语句放到 this.$nextTick() 中执行。
原理分析:
- 子组件接受到的来自父组件的值会自动改变,但是仅限自身,与其有关的其他值不会关联变化,故可以通过 watch 监听变化实现其他内容的变化。
- $refs 是非响应式的,ref 本身是作为渲染结果被创建的。故在父组件中使用 $refs 调用子组件方法取到的是过去的值(DOM当前值)。 使用 $nextTick 有效的原因见原理3。
- Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,缓冲在同一事件循环"tick"中发生的所有数据变更(会去重)。然后,在下一个的事件循环"tick"中,Vue 刷新队列内容将新内容更新到 DOM 上。