更新時(shí)間:2023-11-06 來(lái)源:黑馬程序員 瀏覽量:
在項(xiàng)目的根目錄中,鼠標(biāo)右鍵,創(chuàng)建 components -> test 文件夾。在新建的 components -> test 文件夾上,鼠標(biāo)右鍵,點(diǎn)擊“新建 Component”,鍵入組件的名稱之后回車,會(huì)自動(dòng)生成組件對(duì)應(yīng)的 4 個(gè)文件,后綴名分別為 .js,.json, .wxml 和 .wxss。
為了保證目錄結(jié)構(gòu)的清晰,建議把不同的組件,存放到單獨(dú)目錄中,例如:
上圖中在頁(yè)面的 .json 配置文件中引用組件的方式,叫做“局部引用”。使用局部引用的示例代碼如下:
//在頁(yè)面的.json文件中,引入組件 { "usingComponents": { "my-test1": "/components/test1/test1" } } //在頁(yè)面的.wxml文件中,使用組件 <my-test1></my-test1>
在 app.json 全局配置文件中引用組件的方式,叫做“全局引用”。全局引用組件的示例代碼如下:
//在 app.json 文件中,引入組件 { "pages":[ /* 省略不必要的代碼 */ ], "window":{ /* 省略不必要的代碼 */ ], "usingComponents":{ "my-test2": "/components/test2/test2" } } //在頁(yè)面的.wxml文件中,使用組件 <my-test2></my-test2>
我們可以根據(jù)組件的使用頻率和范圍,來(lái)選擇合適的引用方式,如果某組件在多個(gè)頁(yè)面中經(jīng)常被用到,建議進(jìn)行“全局引用”,如果某組件只在特定的頁(yè)面中被用到,建議進(jìn)行“局部引用”。
組件和頁(yè)面的區(qū)別
從表面來(lái)看,組件和頁(yè)面都是由 .js、.json、.wxml 和 .wxss 這四個(gè)文件組成的。但是,組件和頁(yè)面的 .js 與 .json 文件有明顯的不同:
組件的 .json 文件中需要聲明 "component": true 屬性。
組件的 .js 文件中調(diào)用的是 Component() 函數(shù)。
組件的事件處理函數(shù)需要定義到 methods 節(jié)點(diǎn)中。