官方文档
子组件:
json:
{
"component": true, // 会自动生成
}
wxml:
<button bindtap="onTapChild">点击这个按钮将触发“myevent”事{{innerText}}</button>
js:
Component({
/**
* 组件的属性列表
*/
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
},
dataFromParent: {
type: Array,
value: [],
observer: function (newVal, oldVal, changedPath) {
// 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
}
}
},
/**
* 组件的初始数据
*/
data: { },
/**
* 组件的方法列表
*/
methods: {
componentInnerFunction(){},
onTapChild: function(event){
// detail对象,提供给事件监听函数
var myEventDetail = {
id: event.currentTarget.dataset.id
}
// 触发事件的选项
var myEventOption = {}
// 使用 triggerEvent 方法触发自定义组件事件,指定事名、
//detail对象和事件选项
//子传父事件
this.triggerEvent('parentEvent', myEventDetail, myEventOption)
this.triggerEvent("icre", { "index": 323 }, {})
// triggerEvent 关键字用于将事件传递给页面
// icer (可自定义) 页面通过 bind:icre 获取组件事件
// { "index": 323 } 为组件事件携带的数据
}
}
})
父组件:
//.wxml:
<comp id="myComponent" bind:icre="click" someProperty="{{someData}}"></comp>
//.json:
{
"usingComponents": {
"comp": "/components/comp/comp" // 组件路径
},
"navigationBarTitleText": "自定义组件" // 组件页面台头名
}
//.js:
Page({
data:{
someData:{}
},
click(e){
console.log(e.detail.index)//子组件传递过来的数据
},
//给子组件指定id,在父组件里面调用selectComponent(id)获取子组
//件,然后就可以调用子组件中methods中定义的函数
onLoad: function () {
//完成父传子事件
let myComponent = this.selectComponent('#myComponent'); // 页面获取自定义组件实例
myComponent.componentInnerFunction(); // 通过实例调用组件事件
},
})
网友评论