ネストされたカスタム入力コンポーネントにデータを送信する正しい方法

Question

私はReactからVueに移行しています.Vueが提供するものはv-modelです。今私は状況にあり、これを行うためのvue-ishの方法は何かを見つけることができません。私はのは、名前と年齢、それを呼びましょうFormContainerで私の状態を持っている

- FormContainer 
    -FormView 
    - CustomInput 
     - input 

：ここ

は次のように私のコンポーネントツリーがどのように見えるかです。私はのカスタムセッターメソッドを書くのを避けたいのですが、普通はv-modelを使用しています。どうすれば入力コンポーネントにデータを渡すことができますか？

現在、私はこのような何かやっている：

// in my container 
<form-view :name="name" :age="age" /> 

// in my form view I am doing something like 
<custom-input v-model="age"/> 
<input v-model="name" /> 

を、それらの両方が動作しないと、私は次のエラーAvoid mutating a prop directly

を取得し、私は

<form-view @age="age" :age="age" @name="name" :name="name"/> 

ような何かを行うことができるはずです

または同様のもの。これについての詳細が必要な場合はお知らせください。

Answer 1

私はこの質問に2度答えましたが、私の答えはメリットがありましたが、私はあなたの質問の対象になっていないと思いますので、削除しました。

イベントは、イベントが起こっている要素からデータ項目を所有するVueに「バブルアップ」することが基本的です。 Vueイベントはバブル処理されませんが、ネイティブイベントが発生します。ネイティブのinputイベントが階層の最下部に生成されている場合は、そこからツリーの上にある任意のコンポーネントの@input.nativeでキャッチできます。

nameとageのデータ項目が最上位のVueにある場合、一番外側のコンポーネントは.sync modifierの小道具として受け取ることができます。つまり、コンポーネントからのupdate:nameおよびupdate:ageイベントは、データ項目が更新されることになります。ここまでは順調ですね。

form-viewコンポーネント内を移動すると、ネイティブ入力要素があります。通常、ネイティブのinputイベントを発行します。私たちは、update:nameイベントとしてバブルまでにそれらをしたいので、私たちはそのようなので、ハンドル：

は

<input :value="name" @input="$emit('update:name', $event.target.value)"> 

今ここに楽しい部分です：form-viewコンポーネント内に、我々はcustom-inputコンポーネントを持っています。その心臓部のどこかに（そしてそれがどれほど深刻なものか気にしない）、ネイティブの入力イベントを生成します。我々は、すべて一緒にそれを置く

<custom-input :value="age" @input.native="$emit('update:age', $event.target.value)"> 

：代わりに、各レベルでそれをキャッチし、それをバブリングの、私たちは自然にそれにバブルをアップしてみましょうとcustom-inputコンポーネントのルートでそれをキャッチし、必要なupdate:ageイベントを発することができますコンポーネントにinput要素、2つのinputイベントハンドラ、および計算なしの2つの変数が渡されます。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    name: 'Jerry', 
 
    age: 21 
 
    }, 
 
    components: { 
 
    formView: { 
 
     props: ['age', 'name'], 
 
     components: { 
 
     customInput: { 
 
      props: ['value'] 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <div>Name: {{name}}</div> 
 
    <div>Age: {{age}}</div> 
 
    <form-view :name.sync="name" :age.sync="age" inline-template> 
 
    <div> 
 
     <custom-input :value="age" @input.native="$emit('update:age', $event.target.value)" inline-template> 
 
     <div> 
 
      Age: <input :value="value"> 
 
     </div> 
 
     </custom-input> 
 
     <div>Name: <input :value="name" @input="$emit('update:name', $event.target.value)"></div> 
 
    </div> 
 
    </form-view> 
 
</div>