javascript - Vue - 带有子输入组件的表单组件

Question

我有一个父组件(表单容器):

<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 数据(在子组件中)。对此的最佳实践是什么？

Answer 1

您将需要使用动态 Prop 从父级更新子级。来自他们的documentation :

Whenever the data is updated in the parent, it will also flow down to the child

类似于:

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

然后将 inputValChild 声明为子组件中的 prop。