同步非必需属性的Vue手表

Question

我们在 Child 组件中同步了属性并监视了这个属性。此属性设置为默认值（非必需）

如果我们不提供从父级到子级的 prop，是否有任何方法可以强制监视子组件中的属性更改？

演示：https://codesandbox.io/s/vue-watch-sync-prop-bug-demo-lofei

我从下面的两个组件中添加了一些代码。

- Parent.vue

<template>
  <!-- watch inside not works if remove ':message.sync' here -->
  <Child :message.sync="message" />
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: { Child },
  data: function (params) {
    return {
      message: "",
    };
  },
};
</script>

- Child.vue

<template>
  <div>message: {{ messageValue }}</div>
</template>

<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  computed: {
    messageValue: {
      get() {
        return this.message;
      },
      set(value) {
        this.$emit("update:message", value);
      },
    },
  },
  watch: {
    message(value) {
      // this not executing
    },
  },
};
</script>

Answer 1

尝试将immediate:true 添加到手表属性：

 watch: {
    message:{
      handler(value) {
     
      },
      immediate:true
    }
  },