从父级清除输入的 VUE 组件数据答案

【问题标题】：Clear input VUE component data from parent从父级清除输入的 VUE 组件数据
【发布时间】：2019-12-19 04:36:36
【问题描述】：

我是Vue的新手，我试图在提交后简单地清除输入组件的数据，但似乎我遗漏了一些东西，因为它的父数据被清除了，我仍然看到输入组件的填充值。

我已经从它的父包装器中设置了输入子组件v-model="title"。一旦我将数据提交给父级，我调用addItem，最后，我应该通过清除它this.title = '' 来清除数据模型，但我可能在如何将数据从父级绑定到子级时做错了。

以及上面的代码，从父组件开始：

<template>
  <form @submit="addItem" class="todo-insert">
    <input-item
      icon="create"
      name="title"
      placeholder="Add a ToVue item..."
      v-model="title"
    />
    <button-item tone="confirm" class="todo-insert__action">
      Aggiungi
    </button-item>
  </form>
</template>

<script>
import ButtonItem from '@vue/Form/ButtonItem/ButtonItem.vue'
import InputItem from '@vue/Form/InputItem/InputItem.vue'
import uuid from 'uuid'

export default {
  name: 'TodoInsert',
  components: {
    ButtonItem,
    InputItem
  },
  data () {
    return {
      title: ''
    }
  },
  methods: {
    addItem (e) {
      e.preventDefault()
      const todo = {
        id: uuid.v4(),
        isComplete: false,
        title: this.title
      }
      this.$emit('add-todo', todo)
      this.title = ''
    }
  }
}
</script>
<style lang="scss" scoped src="./TodoList.scss"></style>

这是子输入组件：

<template lang="html">
  <label class="input">
    <div v-if="label" class="input__label text-sans text-sans--label">
      {{ label }}
    </div>
    <div class="input__row">
      <input
        :autocomplete="autocomplete"
        :class="[hasPlaceholderLabel, isDirty]"
        :name="name"
        :placeholder="placeholder"
        class="input__field"
        type="text"
        v-on:input="updateValue($event.target.value)"
        v-on:blur="updateValue($event.target.value)"
      >
      <div v-if="placeholderLabel" class="input__placeholder text-sans text-sans--placeholder">
        {{ placeholderLabel }}
      </div>
      <div v-if="icon" class="input__icon-area">
        <icon-item
          :name="icon"
        />
      </div>
      </div>
  </label>
</template>

<script>
import IconItem from '../../IconItem/IconItem.vue'

export default {
  name: 'InputItem',
  props: {
    autocomplete: {
      type: String,
      default: 'off'
    },
    icon: String,
    label: String,
    name: {
      type: String,
      default: 'input-text'
    },
    placeholder: String,
    placeholderLabel: String
  },
  computed: {
    hasPlaceholderLabel () {
      return this.placeholderLabel ? 'input__field--placeholder-label' : ''
    },
    isDirty () {
      // return this.$attrs.value ? 'input__field--dirty' : ''
      return 'input__field--dirty'
    }
  },
  methods: {
    updateValue: function (value) {
      this.$emit('input', value)
    }
  },
  components: {
    IconItem
  }
}
</script>
<style lang="scss" src="./InputItem.scss"></style>

我错过了什么？

【问题讨论】：

标签： javascript vue.js data-binding vuejs2 2-way-object-databinding

【解决方案1】：

您的子组件是单向绑定的。这意味着它可以更改值，但不会收到来自父组件的任何更新。要接收更新，您需要在您的孩子中接收属性value：

props: {
  value: String
}

然后，您需要将接收到的值传递给输入：

<input
    :value="value"
    :autocomplete="autocomplete"
    :class="[hasPlaceholderLabel, isDirty]"
    :name="name"
    :placeholder="placeholder"
    class="input__field"
    type="text"
    v-on:input="updateValue($event.target.value)"
    v-on:blur="updateValue($event.target.value)"
  >

现在当父组件改变值时输入应该更新

【讨论】：