1

すべてのビジネス ロジック、ajax、データなどを処理するコンテナー コンポーネントがあります。

データとメソッドを小道具として渡す子コンポーネントがあります。

したがって、この質問には、送信時に呼び出す関数として小道具を取得する「CommentForm」コンポーネントがあります。

子コンポーネントがデータを使用してそのメソッドを呼び出すと、すべてがうまく機能しますが、2 つのオプションがあります。

  • データは良好だったので、コンポーネントの入力をクリアします
  • データが不良で、エラーを表示

2番目のオプションは簡単です...

しかし、最初に、子コンポーネントにコンテンツをクリアするように指示するにはどうすればよいですか?別のプロップを作成する必要がありますか?それとも別の良い方法ですか?

** このコードは Vue.js の私のコードの例ですが、これは反応のような一般的な質問です

let Vue = require('vue');


ParentComponent = Vue.extend({

    template: `<div>
                <CommentForm submitted="myFucntion"></CommentForm>
              </div>`,
    methods: {
      myFucntion: function(text) {
        //whatever
        //but on sucess I want to clear the child component
      }
    }
  };
                         
let Vue = require('vue');


CommentForm = Vue.extend({
    props: {
        submitted: {
            type: Function,
            required: true
        }
    },
    data: function () {
        return {
            text: ''
        }
    },
    template: `<div>
                <input type="text" v-model="text" />
                <button @click="submitted(text)" />
              </div>`
  };

4

2 に答える 2

1

ここで反応についてさらに答えていますが、同じロジックが Vue に適用されるはずです。親の状態を維持するか、flux/redux タイプの実装に格納することにより、親コンポーネントが子の入力の値を所有するようにする必要があります。React で行うことは、親valueに子へのパスとonChangeコールバックを持たせることです。子コンポーネントが変更を検出すると、渡された を起動しonChange、親コンポーネントは独自の内部状態を更新するか、フラックスのような実装を使用している場合はフラックス アクションを起動します。そうすれば、送信が成功すると、親はプロップをクリアして子に渡すことができます。

これを行う他の方法は、親と子の間で状態を複製するか、親に何らかの形で子の内部関数に到達して呼び出す必要があるため、おそらくずさんなものになります。これはかなりハックです。それが役立つことを願っています!

于 2016-09-15T06:14:00.113 に答える