Vue 2. 如何通过 v-model 绑定获取子值

Question

我在自定义组件中使用了 v-model，但是当我尝试在父组件中获取子组件的数据（value props）时，我得到的是旧值，尽管父组件中的数据已经改变。如果我通过setTimeout获取到子组件的数据，那么我就获取到了我需要的数据。如何同步 v-model @input 事件和我从父元素中的子元素接收到的数据？

逻辑是这样的：有AppForm(parent)组件和AppSelect(child)组件。我在 AddSelect 上绑定 v-model，并通过 watch() { v-model-data } 跟踪更改。然后 v-model 数据改变了我调用 AppForm.data() 方法，它遍历子列表并获取 AppSelect 组件的 value prop，但是这个值是旧的。

简短示例： https://codesandbox.io/s/serene-wildflower-5seqx?file=/src/App.vue

Answer 1

您正试图在观察者中获取子组件的道具，观察道具绑定到的数据属性。当然watcher先触发，然后数据传到子组件，prop更新。如果你依赖于触发 Vue 事件和函数的顺序，这不是一个好的设计，但如果你必须，你可以使用 vm.$nextTick() 函数在同步所有内容后获取值。

watch: {
    selectData(newV, oldV) {
      alert("Select data from parent component: " + newV);
      this.$refs.form.data();
      this.$nextTick(() => {
        alert("Show select data after 2sec");
        this.$refs.form.data();
      }, 2000);
    },
  },

尽管如此，我建议您将观察者转移到子组件中并在那里访问 data 属性。

Vue 2. 如何通过 v-model 绑定获取子值

Vue 2. How get child value throuth v-model binding

vue.js

custom-component

v-model