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