vue.js - vue js sync修饰符不会更新输入值

Question

我有一个关于vuejs中的同步修饰符的初学者问题。在我的示例中，我想根据焦点事件更改输入的值。该值是一个对象inputsData，我是从app获取的。在parent中，我将其传递到正在渲染的child中。我设置了计时器，因为我想发出服务器请求。正如您在handleFocusFromChild方法中看到的那样，它将我的dataToBeChanged更改为newData(4秒后也会记录一次)。正如我从vue guid所了解的那样，它还应该更新输入值，但是没有更新，而且我也不明白为什么，因为dataToBeChanged现在有了newData的新值。有人可以向我解释为什么以及如何使它起作用吗？

我在这里使用父级:

import Parent from "./parent.js";

Vue.component("app", {
  components: {
    Parent
  },
  template: `
           <div>
             <parent :inputsData="{
                                   'firstElement':{'firstInputValue':'Hi there'},
                                   'secondElement':{'secondInputValue':'Bye there'}
                                    }"></parent>
           </div>
            `
});

这是 parent :

import Child from "./child.js";
export default {
  name: "parent",
  components: {
    Child
  },
  props: {
    inputsData: Object
  },
  template: ` 
         <div>
           <child @focusEvent="handleFocusFromChild"
                  :value.sync="inputsData.firstElement.firstInputValue"></child>
           <child @focusEvent="handleFocusFromChild"  
                  :value.sync="inputsData.secondElement.secondInputValue"></child>
           </div>
            `,
  computed: {
    dataToBeChanged: {
      get: function() {
        return this.inputsData;
      },
      set: function(newValue) {
        this.$emit("update:inputsData", newValue);
      }
    }
  },
  methods: {
    handleFocusFromChild: function() {
      var newData = {
        firstElement: { firstInputValue: "Hi there is changed" },
        secondElement: { secondInputValue: "Bye there is changed" }
      };
      setTimeout(function() {
        this.dataToBeChanged = newData;
      }, 3000);

      setTimeout(function() {
        console.log(this.dataToBeChanged);
      }, 4000);
    }
  }
};

这是 child :

export default {
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input @focus="$emit('focusEvent', $event)"
                         v-model="value">
                </div>
              </div>
            `,
  props: {
    value: String
  }
};

Answer 1

您的子组件应发出“this。$ emit('update:value'，newValue)”作为事件
看一下文档:https://br.vuejs.org/v2/guide/components-custom-events.html

另一种方法是这样的:

export default {
  template: `
              <div class="form-group">
                <div class="input-group">
                  <input @focus="$emit('focusEvent', $event)"
                         v-model="valueProp">
                </div>
              </div>
            `,
  props: {
    value: String
  },
  computed: {
    valueProp:{
            get(){
                return this.value
            },

            set(val){
                return this.$emit("update:value", val);
            }
        },
  }
  methods: {
    handleFocus() {
      this.$emit("focusEvent");
    }
  }
};