實戰(zhàn)：從通信原理到綜合應(yīng)用)
Vue 組件基礎(chǔ)實戰(zhàn)從通信原理到綜合應(yīng)用標簽vue3前端組件化propsemit簡介本文結(jié)合 Vue3 單文件組件講解組件核心概念、項目搭建、父子組件通信原理附帶完整可運行案例適合前端初學(xué)者學(xué)習(xí)。Vue組件基礎(chǔ)實戰(zhàn)從通信原理到綜合應(yīng)用一、組件是什么組件是Vue開發(fā)的核心思想組件就是頁面上獨立、可復(fù)用的一塊UI和邏輯。Vue3使用單文件組件SFC后綴名為.vue一個文件分為三部分template編寫頁面結(jié)構(gòu)htmlscript setup編寫業(yè)務(wù)邏輯jsVue3推薦setup語法糖style編寫樣式添加scoped可以實現(xiàn)樣式隔離不會污染其他組件配圖1VSCode項目目錄截圖展示src/components文件夾體現(xiàn)組件文件存放位置。組件化開發(fā)優(yōu)勢復(fù)用相同UI多處頁面直接引用不用重復(fù)寫代碼易維護每個組件只負責(zé)自己這一塊功能修改不影響其他頁面便于分工多人協(xié)作可以分開開發(fā)不同組件二、Vue3項目創(chuàng)建過程使用官方腳手架 create-vue 創(chuàng)建項目終端輸入命令npmcreate vuelatest 項目配置選項 - 項目名稱my-app-vue - 是否使用 TypeScript否 - 是否使用 JSX否 - 是否添加 Vue Router是 - 是否添加 Pinia 狀態(tài)管理是 - 測試框架否 - Prettier 代碼格式化是 - 試驗特性全部不勾選 - 是否跳過示例代碼No保留示例方便學(xué)習(xí) 項目生成完成依次執(zhí)行命令安裝依賴并啟動項目cdmy-app-vuenpminstallnpmrun dev 瀏覽器訪問http://localhost:5173/項目啟動成功。## 三、實戰(zhàn)案例父子組件通信組件之間最常用兩種通信方式1. props父組件 → 子組件向下傳遞數(shù)據(jù)單向數(shù)據(jù)流2. emit 自定義事件子組件 → 父組件向上傳遞數(shù)據(jù)1. 創(chuàng)建子組件 src/components/CardDemo.vuetemplatedivclasscardh2{{cardTitle}}/h2p{{cardDesc}}/pbutton clicksendMsg向父組件發(fā)送消息/button/div/templatescript setup// 接收父組件傳過來的數(shù)據(jù) const propsdefineProps({cardTitle: String, cardDesc: String})// 聲明自定義事件用于向父組件傳值 const emitdefineEmits([childSend])const sendMsg(){// 觸發(fā)事件攜帶參數(shù)傳給父組件 emit(childSend,子組件我是來自卡片組件的消息)}/scriptstyle scoped.card{border: 1px solid#42b983;padding: 20px;border-radius:10px;width:350px;}/style2. 父組件 src/App.vue引入并使用 CardDemo 子組件templatedivclassapph1父組件頁面/h1!-- 使用子組件props傳值監(jiān)聽子組件自定義事件 --CardDemocardTitleVue組件學(xué)習(xí)cardDesc父子通信案例演示childSendreceiveMsg/pstylemargin-top:20px;收到子組件消息{{message}}/p/div/templatescript setup// 導(dǎo)入子組件importCardDemo from./components/CardDemo.vueimport{ref}fromvue// 定義變量接收子組件傳來的數(shù)據(jù) const messageref(暫無消息)const receiveMsg(val){message.valueval}/scriptstyle.app{padding:30px;}/style配圖2瀏覽器頁面運行截圖。頁面展示卡片組件點擊按鈕后下方文字更新演示通信效果。## 四、核心知識點講解1. props父傳子 父組件在組件標簽上寫自定義屬性子組件通過defineProps接收。 ?? 單向數(shù)據(jù)流原則**子組件不能直接修改 props 里面的值**只能讀取。如果需要修改要復(fù)制到子組件本地變量。2. emit 自定義事件子傳父 子組件先用defineEmits聲明事件名稱調(diào)用emit(事件名,參數(shù))發(fā)送數(shù)據(jù) 父組件通過事件名監(jiān)聽拿到子組件傳遞過來的數(shù)據(jù)。3. style scoped 加上scoped后樣式只作用于當(dāng)前組件內(nèi)部 DOM。底層原理Vue 自動給 DOM 添加唯一屬性CSS 增加屬性選擇器防止全局樣式互相污染。## 五、開發(fā)常見問題1. 使用組件前必須import導(dǎo)入否則頁面報錯找不到組件2. props 不能直接修改是單向數(shù)據(jù)流3. scoped 只能隔離樣式父組件樣式無法直接修改子組件內(nèi)部元素4. emit 事件名稱建議使用小駝峰或者短橫線命名保持統(tǒng)一規(guī)范## 六、總結(jié)組件化是 Vue 最重要的思想。本次實戰(zhàn)掌握了單文件組件結(jié)構(gòu)、項目搭建、父子組件通信的兩種基礎(chǔ)方式 props 和 emit。理解組件通信就可以拆分頁面搭建出結(jié)構(gòu)清晰、可復(fù)用的前端頁面。后續(xù)可以繼續(xù)學(xué)習(xí)插槽 slot、組件生命周期等進階知識。 Vue 組件基礎(chǔ)實戰(zhàn)：從通信原理到綜合應(yīng)用
Vue 組件基礎(chǔ)實戰(zhàn)從通信原理到綜合應(yīng)用標簽vue3前端組件化propsemit簡介本文結(jié)合 Vue3 單文件組件講解組件核心概念、項目搭建、父子組件通信原理附帶完整可運行案例適合前端初學(xué)者學(xué)習(xí)。Vue組件基礎(chǔ)實戰(zhàn)從通信原理到綜合應(yīng)用一、組件是什么組件是Vue開發(fā)的核心思想組件就是頁面上獨立、可復(fù)用的一塊UI和邏輯。Vue3使用單文件組件SFC后綴名為.vue一個文件分為三部分template編寫頁面結(jié)構(gòu)htmlscript setup編寫業(yè)務(wù)邏輯jsVue3推薦setup語法糖style編寫樣式添加scoped可以實現(xiàn)樣式隔離不會污染其他組件配圖1VSCode項目目錄截圖展示src/components文件夾體現(xiàn)組件文件存放位置。組件化開發(fā)優(yōu)勢復(fù)用相同UI多處頁面直接引用不用重復(fù)寫代碼易維護每個組件只負責(zé)自己這一塊功能修改不影響其他頁面便于分工多人協(xié)作可以分開開發(fā)不同組件二、Vue3項目創(chuàng)建過程使用官方腳手架 create-vue 創(chuàng)建項目終端輸入命令npmcreate vuelatest 項目配置選項 - 項目名稱my-app-vue - 是否使用 TypeScript否 - 是否使用 JSX否 - 是否添加 Vue Router是 - 是否添加 Pinia 狀態(tài)管理是 - 測試框架否 - Prettier 代碼格式化是 - 試驗特性全部不勾選 - 是否跳過示例代碼No保留示例方便學(xué)習(xí) 項目生成完成依次執(zhí)行命令安裝依賴并啟動項目cdmy-app-vuenpminstallnpmrun dev 瀏覽器訪問http://localhost:5173/項目啟動成功。## 三、實戰(zhàn)案例父子組件通信組件之間最常用兩種通信方式1. props父組件 → 子組件向下傳遞數(shù)據(jù)單向數(shù)據(jù)流2. emit 自定義事件子組件 → 父組件向上傳遞數(shù)據(jù)1. 創(chuàng)建子組件 src/components/CardDemo.vuetemplatedivclasscardh2{{cardTitle}}/h2p{{cardDesc}}/pbutton clicksendMsg向父組件發(fā)送消息/button/div/templatescript setup// 接收父組件傳過來的數(shù)據(jù) const propsdefineProps({cardTitle: String, cardDesc: String})// 聲明自定義事件用于向父組件傳值 const emitdefineEmits([childSend])const sendMsg(){// 觸發(fā)事件攜帶參數(shù)傳給父組件 emit(childSend,子組件我是來自卡片組件的消息)}/scriptstyle scoped.card{border: 1px solid#42b983;padding: 20px;border-radius:10px;width:350px;}/style2. 父組件 src/App.vue引入并使用 CardDemo 子組件templatedivclassapph1父組件頁面/h1!-- 使用子組件props傳值監(jiān)聽子組件自定義事件 --CardDemocardTitleVue組件學(xué)習(xí)cardDesc父子通信案例演示childSendreceiveMsg/pstylemargin-top:20px;收到子組件消息{{message}}/p/div/templatescript setup// 導(dǎo)入子組件importCardDemo from./components/CardDemo.vueimport{ref}fromvue// 定義變量接收子組件傳來的數(shù)據(jù) const messageref(暫無消息)const receiveMsg(val){message.valueval}/scriptstyle.app{padding:30px;}/style配圖2瀏覽器頁面運行截圖。頁面展示卡片組件點擊按鈕后下方文字更新演示通信效果。## 四、核心知識點講解1. props父傳子 父組件在組件標簽上寫自定義屬性子組件通過defineProps接收。 ?? 單向數(shù)據(jù)流原則**子組件不能直接修改 props 里面的值**只能讀取。如果需要修改要復(fù)制到子組件本地變量。2. emit 自定義事件子傳父 子組件先用defineEmits聲明事件名稱調(diào)用emit(事件名,參數(shù))發(fā)送數(shù)據(jù) 父組件通過事件名監(jiān)聽拿到子組件傳遞過來的數(shù)據(jù)。3. style scoped 加上scoped后樣式只作用于當(dāng)前組件內(nèi)部 DOM。底層原理Vue 自動給 DOM 添加唯一屬性CSS 增加屬性選擇器防止全局樣式互相污染。## 五、開發(fā)常見問題1. 使用組件前必須import導(dǎo)入否則頁面報錯找不到組件2. props 不能直接修改是單向數(shù)據(jù)流3. scoped 只能隔離樣式父組件樣式無法直接修改子組件內(nèi)部元素4. emit 事件名稱建議使用小駝峰或者短橫線命名保持統(tǒng)一規(guī)范## 六、總結(jié)組件化是 Vue 最重要的思想。本次實戰(zhàn)掌握了單文件組件結(jié)構(gòu)、項目搭建、父子組件通信的兩種基礎(chǔ)方式 props 和 emit。理解組件通信就可以拆分頁面搭建出結(jié)構(gòu)清晰、可復(fù)用的前端頁面。后續(xù)可以繼續(xù)學(xué)習(xí)插槽 slot、組件生命周期等進階知識。