一、前言
最近项目上需要用到抽离的组件来实现一些功能。现在将组件使用过程中的遇到的一些问题进行分享。
二、父页面引用子组件及使用
1、引用
在父页面的.json文件中,添加上组件。如下代码所示,“usingComponents”的值是一个对象,里面添加子组件。其中冒号前面的为子组件的名字(用在父页面中,可自定义),冒号后面的是子组件的路径。
{
"usingComponents": {
"rylist":"../../../components/zylist/zylist",
"inputContent":"../../../components/inputContent/inputContent",
"tips":"../../../components/tips/tips"
},
"navigationBarTitleText": "住院记录"
}
2、使用
在父页面的.wxml文件中直接使用定义的组件名称,即可完成组件的使用
<inputContent></inputContent>
三、父页面给子组件传参
1、传参
如果是父页面给子组件传参,那么仅需要在子组件所在的标签上添加上需要传递的名字及值即可。如下述代码所示,userinfo即为要传递的参数名,{ {userinfo}}为参数值
<inputContent id="inputContent" userinfo="{
{userinfo}}"></inputContent>
2、接收参数
子组件在properties属性列表中,接收父页面传递的参数。该值是一个对象类型,可以指定数据类型及默认值及其他,这里就不一一举例。
/**
* 组件的属性列表
*/
properties: {
userinfo: {
type: Object,
value: null
}
},
子组件在其所在的wxml文件中直接使用该值即可。(就跟正常页面使用data中对象类型的值一样的使用方式)
四、子组件给父页面传参
子组件可以通过调用父页面方法的方式给父页面传参。
父页面代码:
<inputContent id="inputContent" bind:addUser="addUser" bind:cancle="cancle"></inputContent>
子组件代码:
var user = {
xm: xm,
sfzhm: sfzhm,
openid: app.globalData.openID,
}
this.triggerEvent("addUser", JSON.stringify(user))
子组件使用this.triggerEvent("方法名","参数')触发父页面中的方法,并传参参数;
父页面使用bind:方法名="父页面中的方法名"的方式进行接收。
父页面中的方法会有一个形参,比如e,用来接收从子组件传递的参数。如下代码:
//新增用户点击按钮
addUser: function (e) {
var that = this;
if (e != undefined) {
var type = e.type;
//当从子组件传值
if (type == "addUser") {
var userInfo = e.detail;
//新增用户信息
Util.addZyUser(userInfo)
}
}
that.setData({
showPopup: !that.data.showPopup
})
},
五、其他
① 如果需要做弹窗效果,可以通过wx:if=”{ {show}}“的方法来控制显隐。
② 后续补充……