看一下我的組件結(jié)構(gòu) components(被調(diào)用的組件) index(頁面組件)請(qǐng)忽略調(diào)圖片
module文件就是我所創(chuàng)的自定義組件,module.wxml文件代碼為:
<view class="inner"> <Text>I am learning 微信小程序</Text> </view> |
module.js文件代碼為:
const app = getApp() Component({ properties: { // 這里定義了innerText屬性,屬性值可以在組件使用時(shí)指定 innerText: { type: String, // value: '', } }, data: { // 這里是一些組件內(nèi)部數(shù)據(jù) someData: {} }, methods: { customMethod(){ console.log('hello world! I am learning 微信小程序') } } }) |
現(xiàn)在我要在pages/index文件中使用該自定義組件,該怎么做呢?
1、在module.json文件中添加以下代碼:
{ "component": true } |
2、在需要調(diào)用自定義組件的文件中,如pages/index文件需要調(diào)用自定義組件,那么則需要在pages/index/index.json文件中添加如下代碼:
{ "usingComponents": { "module": "../../components/module/module" // 組件名以及組件所在路徑 } } |
3、然后就可以在module.wxml文件中使用該自定義組件了,
index.wxml文件代碼如下:
<view> <module id="module"></module> </view> |
此時(shí)調(diào)用自定義組件后,效果如下:
4、現(xiàn)在要調(diào)用自定義組件中的方法就可以這樣做,為了方便,這里我使用的是點(diǎn)擊按鈕調(diào)用事件,因此index.wxml文件代碼變?yōu)椋?/p>
<view> <button bindtap="showComponent">組件調(diào)用</button> <module id="module"></module> </view> |
5、index.js文件部分代碼為:
const app = getApp() import { Resume } from '../../request/api' const request = new Resume() Page({ data: { }, onLoad: function () { // request.testInitial({ 'name':'123' }).then(res=>{ // console.log(res) // }) }, onReady: function () { // 頁面初次渲染完成后,使用選擇器選擇組件實(shí)例節(jié)點(diǎn),返回匹配到組件實(shí)例對(duì)象 this.module= this.selectComponent('#module') }, showComponent: function () { let module= this.module module.customMethod() // 調(diào)用自定義組件中的方法 } }) |
最后的結(jié)果:
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)