Vue - компонент формы с дочерним компонентом ввода

Question

Vue - компонент формы с дочерним компонентом ввода

1

У меня есть родительский компонент (контейнер формы):

<template lang="pug">
    form
       MyCustomInput(v-on:emitMethod="parentEmitMethod")
         button(@click.prevent="send")
</template>

<script>
  export default {
    ...
    data () {
      return {
        inputValue: ''
      }
    },
    methods: {
      submit () {
        //submit logic
      },
      parentEmitMethod (arg) {
       this.inputValue = arg
      }
    }
  }
</script>

и дочерний компонент (компонент ввода - MyCustomInput)

<template lang="pug">
    input(v-model="inputValChild")
</template>

<script>
  export default {
    ...
    data () {
      return {
        inputValChild: ''
      }
    },
    watch: {
      inputValChild: {
         handle () : {
            this.$emit('emitMethod', this.inputValChild)
         }
      }
    }
  }
</script>

Для дочернего компонента связи → родительский компонент (отправить входное значение в форму) Я использую $emit. Он отлично работает.

Теперь я хотел бы после метода submit() (в родительском компоненте) очистить данные inputValChild (в дочернем компоненте). Каковы наилучшие методы для этого?

Maciej 06 окт. 2017, в 18:16

Источник

0

Реализуйте поддержку v-model в дочернем компоненте и очистите значение в родительском компоненте.
Bert 06 окт. 2017, в 17:15

Теги:

javascript

vue.js

vuejs2

2 ответа

0

Я бы сделал это так:

handle () : {
  this.$emit('emitMethod', {
    param: this.inputValChild,
    callback: this.clearNow)
  }

А в родительском компоненте я просто бы назвал бы "callback()" после завершения. Метод clearNow выполнил бы задание в дочернем компоненте. Но есть и другие способы. Самое главное, чтобы вы сохраняли его в проекте и не смешивали все.

user1497119 06 окт. 2017, в 15:01

Ещё вопросы

Реализуйте поддержку v-model в дочернем компоненте и очистите значение в родительском компоненте.

Eric G · Accepted Answer · 2017-10-06T15-04-00.000Z

Вы захотите использовать динамические реквизиты для обновления дочернего элемента от родителя. Из их документации:

Всякий раз, когда данные обновляются в родительском объекте, он также переходит к дочернему

Что-то вроде:

<template lang="pug">
    form
       MyCustomInput(v-bind:inputValChild="inputValue" v-on:emitMethod="parentEmitMethod")
         button(@click.prevent="send")
</template>

А затем объявите inputValChild как опору в дочернем компоненте.