はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
はじめに VueはコンポーネントをSFC(シングルファイルコンポーネント)で書くことが推奨されているUIフレームワークである。VueにおけるSFCではHTML、CSS、JSを一つのファイルにまとめることで一つのコンポーネントを作ることができる また最近ではVue3が盛り上がってきている。2020年10月8日現在、Vue2のサポートは来年2023年で終了するという発表もあり長期的にメンテが必要なプロジェクトに関してはVue3への移行が慌ただしく行われていることだろう そんな中ある一つの疑問が浮かんだ。「人やプロジェクトによってSFCの書き方が異なる。templateタグ、scriptタグを書く順番が違う」と。 どういうことか具体的に見てみよう。以下はVue3公式から引用したコードだ <script setup> import { ref, onMounted } from 'vue' //
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く