首先能看檔案看檔案：微信開放檔案
微信小程式開發工具下載：穩定版 Stable Build | 微信開放檔案
微信開發注冊登錄：
微信公眾平臺
目錄
一：組件/components創建
二：pages頁面中參考組件/components：
舉個例子:想要在pages頁面中的user.wxml中使用組件item
1.首先配置pages的user頁面里的json檔案，也就是user.json：
2.在user.json中配置item組件的路徑即可：
三：pages頁面中使用組件/components：
接著上個例子，user.json已經配置完成，
四：組件傳遞引數
五：組件的樣式
styleIsolation有三種屬性
六：組件中的插槽使用
1.默認插槽
直接在組件中寫入slot，實作默認插槽效果，?
2.具名插槽
在pages頁面中使用具名插槽slot：
在組件中使用具名插槽slot： ?
一：組件/components創建
在小程式目錄中新建一個components檔案夾，用于存放各種組件，然后在其中創建一個自己需要的組件（我創建了一個名為item的組件）
建立組件檔案的時候，建議直接右鍵檔案夾–>選擇新建component!!!
重點提醒：page與component一定看清！！！兩者js區別非常大
二：pages頁面中參考組件/components：
舉個例子:想要在pages頁面中的user.wxml中使用組件item
1.首先配置pages的user頁面里的json檔案，也就是user.json：
2.在user.json中配置item組件的路徑即可：
格式："組件名":路徑
三：pages頁面中使用組件/components：
接著上個例子，user.json已經配置完成，
組件在頁面中參考是自己在user.json中起的名字
格式：<組件名></組件名>
此時，就可以在pages頁面的user頁面使用組件item
此時，就可以在pages頁面的user頁面看到組件item渲染的內容：
四：組件傳遞引數
因為組件在大多數時候都需要依靠父組件的資料來進行功能實作，咱們還用item組件進行舉例，
title和content引數是要從父組件傳入子組件(也就是item)中的值
然后到item.js中設定組件的屬性串列：
在properties中設定傳遞值的屬性，type是值的型別，
如果傳入的是數字，那就是Number ，
陣列就是Array 等等以此類推，
value 是默認值，如果該屬性你設定了，但你在使用組件的時候并沒有用到該屬性，也就是沒有給該屬性傳值，那么該屬性就會使用value中的值，
同時注意properties中的屬性名一定是跟user.wxml中組件設定的屬性是一致的！
properties: {
"title": {
type: String, 資料型別
value: '' 默認值
},
"content": {
type: String, 資料型別
value: '' 默認值
},
}
接下來，在item.wxml中用模板{{}}語法就可以使用引數，完成引數的傳遞
五：組件的樣式
微信小程式的組件是默認樣式隔離的，也就是樣式不會互相影響，
當然，有時也需要樣式的互通，那么，接下來就要進行相應的配置
同樣是item.js里
寫入options配置 ：
styleIsolation有三種屬性
- isolated 樣式隔離（默認）
- apply-shared 允許頁面影響子組件 (只能由頁面影響子組件)
- shared 互相影響
六：組件中的插槽使用
1.默認插槽
在組件中寫：
<item>
<text>嵌套內容</text>
</item>
組件內部
<slot></slot>
直接在組件中寫入slot，實作默認插槽效果，
2.具名插槽
就是給插槽起個名字
重點： multipleslots: true, //開啟多個插槽
在組件的js檔案中的options中配置
組件的js的options定義
options: {
multipleslots: true, //開啟多個插槽
styleIsolation: "isolatedr", //isolated隔離
},
傳入
<text slot="pre">$</text>
<text slot="next">美元</text>
接收
<slot name="pre"></slot>
<slot name="next"></slot>在pages頁面中使用具名插槽slot：
在組件中使用具名插槽slot： 
本文到此結束，更多教程直接百度風尚云網~~
風尚云網個人小站：風尚云網
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413467.html
標籤：其他