关于微信小程序中组件和页面方法的互相调用-微信小程序的页面组件有哪些-微信小程序的组件-即速应用

关于微信小程序中组件和页面方法的互相调用-微信小程序的页面组件有哪些-微信小程序的组件

浏览量：2178 时间：2020-04-06 来源：amazingdyd

1.
一、通过组件调用页面里面的方法：
2.
我们这里用header组件和user页面来举例：
3.
1.先在header组件js页面的methods中，写一个方法，然后用triggerEvent给监听的事件起一个名字，这里叫做run2.在header.wxml中，使用bindtap绑定这个getUserFn方法，一般会绑定到按钮上3.在user.wxml中，调用header组件，并且bind:run"user组件中的方法名"
4.
组件逻辑header.js
methods:{getUserFn(){constmyEventDetail{}//detail对象，提供给事件监听函数this.triggerEvent("run",myEventDetail)//第一个参数，就是给这个事件起个名字，要在组件的bind后面用，第二个参数是传入数据，还有第三个参数冒泡啥的}5.
组件页面header.wxml:
buttonbindtap'getUserFn'通过组件使用USERS里面的方法/button6.
用户页面user.wxml：bind后面的run就是我们在triggerEvent中，给事件起的名字，后面的test，就是我们要调用的user.js中的方法
headerbind:run"test"/header7.
用户逻辑user.js：
test(){console.log("我是user.js中的test方法")}8.
二、通过页面，调用组件中的方法：
9.
通过user页面，调用header组件：1.在user页面中使用header组件，给他起一个ID2.在user.js中，获取到这个组件（实例化）3.通过实例化的对象，即可调用组件中的方法
10.
用户页面user.wxml
headerid"header"header//在页面中调用组件，然后给他起个IDbuttonbindtap"useComponentFn"通过页面调用组件中的方法/button11.
用户逻辑user.js
onLoad:function(options){this.headerthis.selectComponent("#header");//这里是实例化了header,通过header，我们就能调用header组建中的方法},useComponentFn(){this.header.componentFn();//调用了组建中的componentFn方法}12.
组件逻辑header.js中的method中
componentFn(){console.log("我是header中的方法")}