在父组件中需要根据子组件data的变化做一些操作（不能修改子组件），但watch不到变化

Question

现在做法：
在父组件：

computed: {
    // 滚动的距离
    moveY: function () {
      return this.$refs.scrollbar.moveY || 0
    }
  },
watch: {
    moveY (val) {
      console.log(val)
    }
  }

问题：this.$refs.scrollbar.moveY值变化了，但console.log(val)没有输出

Answer 1

mounted() {
    this.$watch('$refs.scrollbar.moveY', console.log)
}

这样写吧

Answer 2

子组件值变化的时候，$emit('move-y-change',value) 到父组件.

如果你用 $refs.scrollbar.moveY，父子组件就多了一个隐性的耦合。那样以后子组件的 moveY 被改掉了，你都不知道。