在按键上更新来自子 Vue.js 的父数据

Question

I have an input in a child component and when the user starts typing in the input it updates the data in the parent component, or should. This is my code, I can post other parts if useful.

Child

<input
  :keyup="updateFilters(filters[data.field.key])"
  :placeholder="data.label"
/>

methods: {
  updateFilters(value) {
    this.$emit("input", value);
  }
}

Parent

 data() {
    return {
      filters: {
        name: "",
        age: "",
        address: "",
      },
    };
  },

Answer 1

You can change the parent from child component the same way you do emiting other events like onchange, onkeyup, onkeydown etc.

Vue.component('parent', {
    data() {
    return {
      parentValue: ''
    };
  },

  template: `
    <div>
      <label>Parent state value:</label>
      {{parentValue}}
      <br/><br/>
      <label>input is the child component:</label>
      <br/>
      <child @fromChild="fromChild"></child>
    </div>
  `,

  methods: {
    fromChild(value) {
        this.parentValue = value
      console.log(value) // someValue
    }
  }
})

Vue.component('child', {  
    template: `
    <input 
        v-on:keyup="updateParent($event.target.value)" 
      placeholder="type something"
    />
  `,

  methods: {
    updateParent(value) {
        console.log(value)
      this.$emit("fromChild", value);
    }
    },
})

new Vue({
  el: "#app",
  data: {
    label: 'in Vue'
  },
  methods: {
    toggle: function(todo) {
        todo.done = !todo.done
    }
  }
})

I've prepared a working example here .