Vue.js 2 と単一ファイル コンポーネントを使用して完全に再利用可能なコンポーネントを作成しようとしていますが、現在、私のアプローチは実現できないようです。
目標は、複雑なネストされた JSON 構造のフォームを作成するためのコンポーネントを作成することです。この構造は、編集してからサーバーに送信することになっています。コンポーネント自体はヘッダーと送信ボタンを表示しますが、フィールドとその配置は完全に私のコンポーネントのユーザーの責任です。(フロントエンドエンジニア)
MyForm コンポーネント (実装はここでは関係ありません) には、JSON データと URL が渡されて投稿されます。
フォームは他の多くのユーザーが再利用できると想定されており、フォーム自体の内容は無関係であると想定されています。子として html/inputs/custom コンポーネントが混在している場合があります。
次のデータを使用して、データがネストされていない単純なシナリオを想像してみましょう。
var mymodel={ name : "My name", surname : "My surname" }
そして、コンポーネントを使用して作成したいフォーム:
<MyForm :model="mymodel" :url="http://localhost/post">
<div>
<MyTextInput v-model="model.name" label="Name"/>
<MyPanel>
<MyTextInput v-model="model.surname" label="Surname"/>
</MyPanel>
</div>
</MyForm>
したがって：
- MyForm は送信するモデルを渡され、それをデータに保存します
- MyTextInput は、入力をラベル付きで表示するためのカスタム コンポーネントです。
- 2 番目の MyTextInput は同じコンポーネントですが、「MyPanel」という名前の別のコンポーネントに作成されます。これは、このフィールドを別の場所に配置する必要があるためです。
ご覧のとおり、変数の受け渡しと構成自体には多くの問題があります。
構成：
<slot></slot>フィールドを表示するために のテンプレートに配置するMyFormと、親スコープでコンパイルされるため、すべての子 (MyTextField を含む) は「モデル」にアクセスできません。- 使用しようとする
<MyForm inline-template>と、すべてのコンテンツが置き換えられるため、フォームのヘッダーとフッターを自動的に表示できません。さらに、単一ファイル コンポーネントを使用する場合、コンパイラは 内のすべてのコンポーネントを検索します。つまり、inline-templateインポートする必要があり、実用的ではありません。私の形になることのないすべてのコンポーネントを事前に知っているわけではありません。MyTextInputMyPanelMyForm
変数を渡す:
- 「モデル」から変数を直接使用すると (最初の TextInput で)、親から変数を変更しているという警告が表示され、次のレンダリングで上書きされます (ただし、この場合、意図的に変更しているため、上書きされません)親）
- モデル
MyTextInputを first に渡さずに second に渡すことはできませんMyPanel。実際には、間にあるすべてのカスタム コンポーネントに渡す必要があります。また、カスタム コンポーネントがいくつ存在するかは事前にわかりません。これは、これまでに配置されるすべてのコンポーネントのコードを変更するMyForm必要があり、ユーザーが含める各カスタム コンポーネントのデータを渡す必要があることを意味します。 - 変更について親に適切に通知しようとする場合、v-on: イベントをすべての textinput とその間のすべてのカスタム コンポーネントに追加して、イベントが に到達するようにする必要があり
MyFormます。
私が言ったように、コンポーネントはシンプルで簡単に再利用できるはずでした. このコンポーネントのユーザーに、このコンポーネントに入れるすべての子のコードを変更するように要求し、内部のすべてのコンポーネントに v-on: を追加するように要求することは、実用的ではないようです。
私のアイデアは Vue.js 2.0 を使用して解決できますか? 以前に AngularJS (1.5) 用に同じコンポーネントを設計しましたが、正常に機能しており、フォームの各子に変更を加える必要はありませんでした。