vue.js - 如何观察父组件的子属性变化

Question

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

我试过这个:

  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，因为这不是正确的方法。如果我可以访问子组件，我会向父组件发出事件，但不幸的是我没有。

Answer 1

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

不幸的是，您的观察器将无法工作。您必须使用函数观察器才能使其工作。并且您必须在mounted Hook 中使用它。

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

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