ヴュー - Iは、親コンポーネント（フォーム容器）を有する子入力コンポーネント

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

親から子を更新するには、動的な小道具を使用します。

データが親に更新されるたびに、それはまた、ダウン子供が好き

何か流れます：彼らの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) 
    } 

を親コンポーネントに私は単に「コールバック（）」終了後に呼び出します。 メソッドclearNowは、子のコンポーネント内でジョブを実行します。しかし、他の方法もあります。プロジェクトで一貫性を保ち、すべてを混ぜないことが最も重要です。