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挂钩内使用它。

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

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

Answer 2

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

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

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

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

如何查看父级组件的子级属性更改

2 个答案: