Vue.js を使って新規作成画面と編集画面で共通のフォームを持つアプリケーションを作りたいと考えています。
データはバックエンドのAPIを通じて保存する想定です。
フォーム部分は同じものを使うのでフォームをコンポーネント化すればよいのではと考えています。
新規作成と編集ではリクエストするバックエンドのAPIが異なるため、新規作成コンポーネントと編集コンポーネントを作成し、
それぞれからフォームコンポーネントを通じてデータを変更し、親コンポーネント側でAPIリクエストをするという形で考えています。
そのように考えたときにデータの受け渡しはどう行うのかがよいのかわかりませんでした。
親子間通信は公式ページにもある通り,
親側
- data を更新するメソッドを用意する
- v-onで子のイベントと親のメソッドを紐付ける
子側
- フォームに入力された時、 $emit
を利用してv-onで上記のメソッドを発火させる
というやり方が検索してもよくでてきます。
この方法だと子コンポーネントであるフォームに多くのプロパティが渡された場合、
例えばユーザの登録・編集で「名前/住所/電話番号」を入力させる場合、
その数だけ親メソッドには更新するメソッドを追加するなどしなくてはいけなくなると考えています。
それはすこし煩雑ではないかなと感じています。
他にすっきりとしてやり方があるのか教えていただきたいです。
またそもそも「共通フォームはコンポーネントにする」という考え方が間違っているのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。