如何从父组件观察子属性的变化答案

【问题标题】：How to watch child properties changes from parent component如何从父组件观察子属性的变化
【发布时间】：2018-12-15 22:43:56
【问题描述】：

我正在使用一个日期选择器组件库，我想观察该组件的属性何时发生变化。

我试过这个：

  watch: {
    '$refs.picker.popupVisible': {
      handler (new_value) {
        console.log('executed')
      },
      deep: true
    }
  }

还有这个：

  computed: {
    picker () {
      console.log(this.$refs.picker.popupVisible)
      return this.$refs.picker.popupVisible
    }
  }

我知道解决方案将是 vue.js hack，因为这不是正确的方法。如果我可以访问子组件，我会向父组件发出 en 事件，但不幸的是我没有。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我在使用有一些限制的库时遇到了类似的问题。

很遗憾，你的 watcher 无法工作。你必须使用 function watcher 才能让它工作。你必须在 mounted 挂钩中使用它。

  mounted() {
    this.$watch(
      "$refs.picker.popupVisible",
      (new_value, old_value) => {
         //execute your code here
      }
    );
  }

我也有一个例子。请take a look here

【讨论】：

有没有解释为什么watch: {} 不起作用？
我不确定，但我猜watch: {} 可用于组件属性，而vm.$watch() 不限于组件实例。因此，在这种情况下，从父、子属性观察 watch: {} 的更改是行不通的。 vm.$watch() 不过效果很好。
我怀疑它不起作用，因为在创建 watch{} 时，尚未安装子组件，因此无法设置反应性。通过使用this.$watch() 进行操作，这是在子组件安装后发生的，因此反应性确实有效。

【解决方案2】：

您可以做的是在父组件中创建一个数据对象，并在该数据对象中包含日期字段并将该数据对象作为道具传递给子组件

<child :dateObj="dateObj"></child>
data: {
  dateObj: {
    date: ""
  }
}

在子组件中，您可以使用 dateObj 道具的 date 字段。这是可能的，因为 Vue 不会监视作为 props 传递的 Objects 的属性，我们可以修改它们而 Vue 不会在控制台中抱怨。

因此更改的日期字段也反映在父项中。

【讨论】：