1小時(shí)學(xué)會(huì)Vue之腳手架與組件化開(kāi)發(fā) 趁著暑假掌握一門(mén)技能 大學(xué)生前端實(shí)習(xí)畢業(yè)設(shè)
1、腳手架
1.1 腳手架命令
VUE CLI ，vue官方基于webpack打造的腳手架工具，內(nèi)置，會(huì)提供很多模板和工具。
可以幫助我們進(jìn)行快速地創(chuàng)建vue項(xiàng)目。
安裝環(huán)境：node、npm
npm，node包管理器，相當(dāng)于一個(gè)應(yīng)用商店。
i：install的意思
-g：表示在node全局進(jìn)行安裝
通過(guò)vue cli方式來(lái)創(chuàng)建項(xiàng)目，
可以手動(dòng)選擇版本。
也可以用vue ui的命令來(lái)創(chuàng)建項(xiàng)目：
不常用，略過(guò)。。
1.2 腳手架創(chuàng)建后的項(xiàng)目結(jié)構(gòu)
- serve：可以打開(kāi)一個(gè)本地的靜態(tài)資源服務(wù)器，將項(xiàng)目直接跑起來(lái)。=> npm run serve
- build：代碼打包，=>npm run build
項(xiàng)目上線，使用的就是dist文件夾。
運(yùn)行dist：
/開(kāi)頭，說(shuō)明不是本地文件，需要用服務(wù)器的方式來(lái)啟動(dòng)。
要先運(yùn)行下面這個(gè)命令，安裝：
再運(yùn)行：serve dist
效果一模一樣：
其他的：
該目錄用來(lái)保存自定義組件。
app.vue是根組件。
main.js是vue應(yīng)用的一個(gè)入口文件。
那些配置文件內(nèi)容大概如下：
-------------------------------------------------------------------------------------
2、組件化開(kāi)發(fā)
2.1 組件的作用與本質(zhì)
組件：用來(lái)封裝頁(yè)面部分功能的一種方式。
一個(gè)組件可以封裝一塊功能的結(jié)構(gòu)、樣式、邏輯。
每個(gè).vue文件中都包含這幾部分。
當(dāng)一個(gè)組件定義好之后，怎么使用呢？
也可以寫(xiě)成多標(biāo)簽形式：
根組件，即App.vue有el，是有個(gè)掛載電；
而非根組件的位置，就是標(biāo)簽的位置。
2.2 組件的通信方式
組件與組件之間的關(guān)聯(lián)性，就是說(shuō)他們的數(shù)據(jù)交互。
A、父?jìng)髯?/strong>
=>父組件傳值給子組件，讓子組件根據(jù)自己的要求渲染自己的數(shù)據(jù)。
- props來(lái)自于英文單詞"properties"的縮寫(xiě)。在Vue中，props用于在父組件中向子組件傳遞數(shù)據(jù)，子組件通過(guò)props屬性來(lái)聲明接收的數(shù)據(jù)。
- props是寫(xiě)在子組件上的；
- 也可以綁定多個(gè)值
- 用多個(gè)類(lèi)型來(lái)定義
- 子組件上可以設(shè)置默認(rèn)值，如果父組件也傳值，就用父組件的，如果父組件不傳值，那就用子組件的默認(rèn)值。
- 也可以要求父組件必須傳值;
父組件調(diào)用時(shí)，屬性也可以用響應(yīng)式數(shù)據(jù)：
B、子傳父
下面的圖來(lái)自于chatGPT：
子組件向父組件傳遞數(shù)據(jù)：通過(guò)$emit觸發(fā)事件，父組件通過(guò)監(jiān)聽(tīng)這個(gè)事件來(lái)接收數(shù)據(jù)。
在這個(gè)例子中，子組件通過(guò)$emit方法觸發(fā)了一個(gè)名為childEvent的事件，并傳遞了一條消息。父組件通過(guò)監(jiān)聽(tīng)childEvent事件，接收到了這條消息
然后在父組件做一個(gè)監(jiān)聽(tīng)：
C、同級(jí)傳值
來(lái)自 chatgpt：
在Vue2中，同級(jí)組件之間的通信可以通過(guò)以下幾種方式傳遞值：
- 使用一個(gè)共享的父組件來(lái)傳遞數(shù)據(jù)：可以將需要傳遞的數(shù)據(jù)放在共享的父組件中，然后通過(guò)props屬性將數(shù)據(jù)傳遞給同級(jí)組件。
- 使用事件總線：可以通過(guò)創(chuàng)建一個(gè)空的Vue實(shí)例作為事件總線，然后在同級(jí)組件中使用emit和on來(lái)進(jìn)行事件的觸發(fā)和監(jiān)聽(tīng)。
大佬推薦的：
2.3 組件插槽
Vue2的組件插槽（Slot）是一種用于在組件中擴(kuò)展內(nèi)容的機(jī)制。它允許你在組件的模板中定義一些占位符，然后在使用該組件時(shí)，可以將內(nèi)容插入到這些占位符中。
英文定義：Component Slots
組件插槽的作用是解決組件的可復(fù)用性和靈活性問(wèn)題。它允許組件的使用者在不修改組件源代碼的情況下，根據(jù)自己的需求來(lái)定制組件的部分內(nèi)容。
讓我們通過(guò)一個(gè)生活中的場(chǎng)景來(lái)說(shuō)明組件插槽的用法。假設(shè)我們有一個(gè)通用的模態(tài)框（Modal）組件，用于顯示各種彈窗內(nèi)容。但是，不同的彈窗內(nèi)容可能會(huì)有所不同，例如登錄彈窗和注冊(cè)彈窗。
使用組件插槽，我們可以在模態(tài)框組件中定義一個(gè)插槽，用于接收彈窗內(nèi)容。然后，在使用模態(tài)框組件時(shí)，我們可以將具體的彈窗內(nèi)容插入到這個(gè)插槽中。
2.3.1 默認(rèn)插槽
- 比props傳值簡(jiǎn)單
- 通過(guò)插槽方式，寫(xiě)成雙標(biāo)簽的方式，可以實(shí)現(xiàn)更多的效果。
2.3.2 具名插槽
當(dāng)組件里面有好幾個(gè)地方可以讓外部通過(guò)插槽傳值的話，就需要取名。
效果如下：
也可以簡(jiǎn)寫(xiě)：#具名插槽名
除了插槽一些文本設(shè)置外，還可以在插槽里面使用子組件的一些數(shù)據(jù)：
是helloworld組件的數(shù)據(jù)，不是父組件里面的數(shù)據(jù)。
子組件給插槽傳的是一個(gè)對(duì)象：dataObj
也可以使用解構(gòu)方法取值：
OK。
