vue.js 2.0でコンポーネントのプロパティを公開する方法

Question

vue.jsコンポーネントで検証を実装する方法を考えています。

最初のアイデアは、コンポーネントが "require"、 "min"、 "max"などのエラーコードを検証して返すことです。このエラーコードに従って、別のコンポーネントがフルテキストメッセージを表示します。

エラーメッセージがコンポーネントのテンプレート内に常に表示されるとは限りません。私は2つの分離したコンポーネントが必要です。

擬似コードはこのようです。

<div> 
<mycomponent ref="salary" errcode="ErrorCode"></mycomponent> 
</div> 
..... 
<div> 
<errormessage watchcomponent="salary" message="salaryErrorMessages"></errormessage> 
</div> 

salaryErrorMessagesはコードとメッセージのハッシュです。 {"require"： "給与を入力してください"、 "min"： "最低給与額が10000"}

Vueにコンポーネントのref属性があります。属性でコンポーネントを参照するためにrefを使用できるかどうかはわかりません。私はと考え

他のソリューション：

1. は、ページのモデルにエラーオブジェクトを追加し、使用に渡し：同期はバインディング。同じオブジェクトを監視することができます。 これは、モデル内にエラーメッセージを宣言する必要があります。

投稿する前にエラーがあるかどうかをページが知る必要があると考える場合は、グローバルエラーオブジェクトが必要な場合があります。

2. イベントバスまたはVuexを使用します。 これは正式な解決策と思われますが、わかりません。

ページに複数のインスタンスがある場合、同じイベントが発生します。すべてのインスタンスが同じイベントを監視します。

Answer 1

あなたは文字通り後方に働いています。 Vueは、親コンポーネントに子プロパティを公開するのではなく、親から子にデータを渡すことに関するものです。

エラーオブジェクトをページのモデルに追加し、using：syncバインディングに渡します。同じオブジェクトを監視することができます。これは、モデル内にエラーメッセージを宣言する必要があります。

syncは、Vueのv2のから消えますが、考え方は基本的に一種の正しいです：親コンポーネントは、1つのオブジェクトを保持し、それがあるとき小道具、親オブジェクトが自動的に親に更新されますように子コンポーネントがそれを渡されたチャンクを取得します子供の中で変わった。それはルートコンポーネントである必要はありません。

イベントバスまたはVuexを使用します。これは正式な解決策と思われますが、わかりません。

多くの州関連の詐欺を管理する必要があるアプリケーションをお持ちの場合、Vuexはほぼ常に正しいソリューションです。

ページに複数のインスタンスがある場合、同じイベントが発生します。すべてのインスタンスが同じイベントを監視します。

Vueは非常に頻繁にあなたのコンソールを汚染します。警告はdata must be a functionです。これが理由です！私の守備では

、それらは非可算作ることは非常に簡単な方法がある__proto__で物事を置く：

はここ最近、知人のために作られたinnocenに与え要約版は本当に恥ずかしいhackjob I です。

Vue.component('error', { 
 
    template: '#error', 
 
    props: ['condition', 'errorMessage'] 
 
}) 
 

 
Vue.component('comp', { 
 
    template: '#comp', 
 
    props: ['errorMessage', 'model'], 
 
}) 
 

 
Vue.component('app', { 
 
    template: '#app', 
 
    data() { 
 
    return { 
 
     models: { 
 
     nameForm: { 
 
      firstName: '', 
 
      lastName: '', 
 
      __proto__: { 
 
      validator: function(value) { 
 
       return _(value).every(x => x.length > 2) 
 
      } 
 
      } 
 
     }, 
 
     otherForm: { 
 
      notVeryInterestingField: 'There are words here', 
 
      veryImportantField: 0, 
 
      __proto__: { 
 
      validator: function(value) { 
 
       return value.veryImportantField > 20 
 
      } 
 
      } 
 
     }, 
 
     __proto__: { 
 
      validator: function(value) { 
 
      return _(value).every(x => x.validator(x)) 
 
      } 
 
     } 
 
     } 
 
    } 
 
    } 
 
}) 
 

 
const vm = new Vue({ 
 
    el: '#root' 
 
})

.error { 
 
    background: orange 
 
} 
 
.alright { 
 
    background: mediumaquamarine 
 
} 
 
section > div, pre { 
 
    padding: 6px; 
 
} 
 
section { 
 
    flex: 1; 
 
} 
 
#root { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<script src="https://unpkg.com/vue@2.1.6/dist/vue"></script> 
 
<script src="https://unpkg.com/lodash"></script> 
 

 
<template id="comp"> 
 
    <div :class="[model.validator(model) ? 'alright' : 'error']" style="display: flex; border-bottom: 2px solid rgba(0,0,0,0.4)"> 
 
    <section> 
 
     <div v-for="(field, fieldName) in model"> 
 
     {{_.startCase(fieldName)}}: 
 
     <input v-model="model[fieldName]"> 
 
     <br> 
 
     </div> 
 
     <error :condition="!model.validator(model)" :error-message="errorMessage"></error> 
 
    </section> 
 
    <section> 
 
     <pre>props: {{$options.propsData}}</pre> 
 
    </section> 
 
    </div> 
 

 
</template> 
 

 
<template id="error"> 
 
    <div v-if="condition"> 
 
    {{ errorMessage || 'Oh no! An error!' }} 
 
    </div> 
 
</template> 
 

 
<template id="app"> 
 
    <div :class="[models.validator(models) ? 'alright' : 'error']"> 
 
    <comp :model="model" error-message="Mistakes were made." v-for="model in models"></comp> 
 
    <pre>data: {{$data}}</pre> 
 
    </div> 
 
</template> 
 

 
<div id="root"> 
 
    <app></app> 
 
</div>

Answer 2

あなたは間違いなくVuexを使用する必要があります。問題を解決するだけでなく、プロジェクトに大きなスケーラビリティをもたらします。