微信小程序組件的引入和調(diào)用的方法
發(fā)布時(shí)間：2021-06-24 08:50 所屬欄目：小程序開發(fā)教程
看一下我的組件結(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é)果：
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://22321a.com/wxmini/doc/course/26720.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
