首頁(yè)技術(shù)文章正文

小程序怎樣全局引用組件和局部引用組件?

更新時(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ú)目錄中,例如:

1699251209355_圖片1.png

上圖中在頁(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)中。

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!