Vue.jsのコンポーネント入門｜Propsとemitを実装で理解する【入門#6】

▼ 未経験からWebエンジニアになる学習ロードマップ＋この回の完成コード＋改造課題3つを無料配布中 コンポーネント・Props・emit。Vue学習者が最初に必ずつまずく3点セットを、デジタル名刺ジェネレーターを作りながら実装で理解する回です。 画面をレゴブロックのような部品に分け、親から子へ、子から親へデータを流します。 つまずきやすい4つのエラー（import忘れ・defineProps宣言忘れ・Propsの直接書き換え・emit名のミス）は、実際に壊して警告を画面に出してから直します。 この動画で分かること ・コンポーネントとは何か（レゴブロックの比喩で） ・自作コンポーネントの作り方とimport（Failed to resolve componentの直し方） ・Props（親から子へデータを渡す）とdefinePropsの書き方 ・なぜPropsを子から書き換えてはいけないのか（target is readonlyの正体） ・emit（子から親へ出来事を伝える）とdefineEmitsの書き方 ・データが一方向に流れるという原則 ━━━━━━━━━━━━━━━ 🎁 LINE登録特典 この回の完成コード一式＋改造課題3つ＋未経験からWebエンジニアになるための学習ロードマップを無料でプレゼント中。 下のリンクから友だち追加して、半角で「vue06」とだけ送ってください。 https://line.me/ti/p/%40468utvbz ※ 文章で復習できる副読本「Vue入門テキスト」は合言葉「vue01」で受け取れます ━━━━━━━━━━━━━━━ 📚 目次 00:00 完成デモ｜デジタル名刺ジェネレーター 00:28 今日解決する3つのモヤモヤ 01:26 App.vueを空にする 02:45 コンポーネントの正体 04:02 部品を作って、読み込む 07:14 Props｜親から子へ 12:17 emit｜子から親へ 17:11 データの流れを整理する 18:03 改造課題と特典 19:43 まとめ・次回予告 ━━━━━━━━━━━━━━━ 🔗 Vue.js入門シリーズ（全12回・順次公開） 第1回 環境構築なしで割り勘アプリを作る    • Vue.jsで何ができるか｜環境構築なしで割り勘アプリを作る【入門#1】   第2回 Vueの環境構築    • Vue.jsの環境構築｜Node.jsインストールからnpm create vueま...   第3回 プロジェクトの中身とSFC 第4回 リアクティビティと.value 第5回 ディレクティブ4つ 第6回 コンポーネント入門（この動画） 第7回 defineModelとスロット 第8回 CSSとTransition 第9回 computedとwatch 第10回 ライフサイクルとコンポーザブル 第11回 Provide・InjectとPinia 第12回 総まとめ ※公開済みの回のリンクは、公開のたびにこの欄へ追記します。 ━━━━━━━━━━━━━━━ 🛠 この動画で使ったもの ・Vue 3 + Vite（npm create vue@latestで作成したプロジェクト） ・Visual Studio Code（https://code.visualstudio.com/ ） ━━━━━━━━━━━━━━━ 👤 この動画の講師 辻郁矢（フリーランスエンジニア・プログラミング講師） SES から実務経験 1 年半でフリーランス独立。マンツーマン指導スクールを運営。 #プログラミング学習 #Vue #Vuejs #コンポーネント #未経験エンジニア