微信小程序组件调用和传值-微信小程序引用组件-微信小程序组件开发-即速应用

微信小程序组件调用和传值-微信小程序引用组件-微信小程序组件开发

浏览量：2333 时间：2020-04-06 来源：aiguangyuan

1.
微信小程序像Vue和React一样赋于了组件的开发能力，支持组件的调用和传值，同时由于小程序上传时限制在2MB以内，对于稍微大一点的小程序组件的使用就特别重要了，下面给大家介绍下小程序的组件用法。
2.
1.封装子组件
3.
在项目根目录下定义components文件夹，新建一个header和footer的文件夹，像小程序的页面一样分别定义js、wxss、wxml、json文件。
4.
header子组件的wxml
viewclass"box"viewclass'header'{{msg}}/viewbuttonbindtap'run'size'mini'接收父组件给的数据/button/view5.
header子组件的js
Component({//组件的属性列表properties:{//接受父组件的给的数据title:{type:"String",value:""}},//组件的初始数据data:{msg:'头部组件'},//组件的方法列表methods:{run(){this.setData({//通过this.data获取父组件里传过来的值msg:this.data.title});},childRun(){console.log('我是子组件的方法')}}})6.
footer子组件的wxml
viewbuttonbindtap'getParent'子组件触发父组件的方法/button/view7.
footer子组件的js
Component({//组件的属性列表properties:{},//组件的初始数据data:{},//组件的方法列表methods:{getParent(){this.triggerEvent('event','子组件的数据')}}})8.
子组件的wxss与json文件的写法没有什么特别的地方，与正常的小程序页面一样，此处省略。
9.
2.在父组件里调用子组件
10.
首先在父组件里的json文件中引入子组件。
{"navigationBarTitleText":"用户","usingComponents":{"header":"../../components/header/header","footer":"../../components/footer/footer"}}11.
父组件wxml
viewheaderid"header"title"{{title}}"/headerbuttonbindtap'getChildFn'父组件里获取子组件的方法/buttonfooterbindevent"run"/footer/view12.
父组件的js
Page({//页面的初始数据data:{title:'父组件给子组件的数据'},//监听页面加载onLoad:function(options){},getChildFn(){varheaderthis.selectComponent("#header")//父组件里面执行子组件的方法header.childRun();//父组件里面直接获取子组件的数据//console.log(header.data.msg);},run(e){console.log('我是父组件的方法')}})13.
3.父组件传值给子组件
14.
在以上的父组件中调用子组件时动态绑定title属性，在子组件header中定义了title接受值的类型，然后通过this.data.title就可以获取父组件传过来的title值了。
15.
4.父组件里调用子组件里的方法
16.
在父组件中调用子组件时，给子组件定义一个id，如上面的id"header"，在父组件中触发getChildFn方法，在getChildFn方法中通过this.selectComponent("#header")获取子组件对象存为header，然后就可以通过header调用子组件里的方法和数据了，如上例中的header.childRun()即调用子组件的方法，header.data.msg即调用子组件的数据。
17.
5.子组件里调用父组件的方法
18.
在子组件footer里触发自定义的getParent方法，在getParent里通过this.triggerEvent传入在父组件中接收数据的事件名("event")和要接收的数据('子组件的数据')，然后在父组件绑定事件event，如上例中的bindevent"run"，然后在父组件里的run方法里就可以接受子组件传过来的数据了。