如何从父组件中查看子属性更改

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

Answer 1

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

不幸的是,你的观察者将无法工作.你必须使用函数观察器才能使它工作.你必须在mounted钩子内使用它.

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

我也有一个例子.请看看这里