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>

对于通信子组件 - ＆gt;父组件（将输入值发送到表单）我使用$emit。它很棒。

现在我想在submit ()方法（在父组件中）之后清除inputValChild数据（在子组件中）。这方面的最佳做法是什么？

Answer 1

您将需要使用动态道具从父级更新子级。来自documentation：

每当在父级中更新数据时，它也将向下流向子级

类似的东西：

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

然后在您的子组件中声明inputValChild作为道具。

Answer 2

我会这样做：

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

在父组件中，我只需要调用＆＃34; callback（）＆＃34;完成后。方法clearNow将在子组件中完成工作。但也有其他方法。最重要的是，你要在项目中保持一致，不要混淆一切。

Vue - 具有子输入组件的表单组件

2 个答案: