小程序之组件
一、父组件传给子组件
1.在component目录中创建testcomponent文件
在testcomponent.wxml中写结构
<view bindtap='clickEvent' data-age='{{age}}'>{{age}}</view>
可以看出页面中写了个绑定函数，在testcomponent.js中调用它
首先定义一个属性列表和属性的方法
Component({
/**
* 组件的属性列表
*/
properties: {
age:{
type:Number,
value:12
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
clickEvent(e){
console.log(e);
this.triggerEvent('click',e.currentTarget.dataset.age) 父和子之间使用triggerEvent进行传递 组件间通信与事件。可点击这个查看详细介绍
}
}
})
2.引用组件
引入的文件。首先在引用文件的json文件夹中引入路径并定义好组件的名称。 如下。
//demo.json
{
"usingComponents":{
"test":"/component/testcomponent/testcomponent"
}
}
在demo.wxml使用组件
<!-- 通过test组件把age的值传到组件目录中，再为它绑定一个事件 -->
<test age="23" bindclick="clickEvent"></test>
demo.js
Page({
data:{
age:2 //定义age为2，把2传到页面组件中，再通过页面组件传到组件目录中，最后显示出来
},
clickEvent(e){
console.log('123')
}
})
页面的初始值为12，通过传递给父组件，值由12变为23。从下图可以看出会同时触发testcomponent和demo里面的方法
二、子组件传给父组件
父组件中的内容都一样，就不叙述了。
Component({
/**
* 组件的属性列表
*/
properties: {
age:{
type:Number,
value:12
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
clickEvent(e){
console.log(e);
this.triggerEvent('click',e.currentTarget.dataset.age)
}
}
})
子组件的内容
demo.wxml
<test age="{{age}}" bindclick="saveEvent"></test>
demo.js
Page({
data:{
age:20 //子组件中的值
},
clickEvent(e){
console.log(e.detail)
},
saveEvent({detail}){
console.log('123');
}
})
传给父组件之后值由12变为20。
定义事件。如下
Page({
data:{
age:20
},
clickEvent(e){
this.setData({
age:detail + 1
})
},
// 父的参数传给子组件
saveEvent({detail}){
console.log(detail)
this.setData({
age:detail + 1
})
}
})
如下：点击之后由20变为21
完整代码：
父组件代码
.wxml代码
<!-- 使用data接收子组件传来的数据 -->
<view bindtap='clickEvent' data-age='{{age}}'>{{age}}</view>
.js代码
// component/testcomponent/testcomponent.js
Component({
/**
* 组件的属性列表
*/
properties: {
age:{
type:Number,
value:12
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
clickEvent(e){
console.log(e);
this.triggerEvent('click',e.currentTarget.dataset.age)
}
}
})
子组件代码：
引入父组件的路径并定义一个组件
.json文件
{
"usingComponents":{
"test":"/component/testcomponent/testcomponent"
}
}
.wxml文件
<!-- 通过test组件把age的值传到组件目录中，再为它绑定一个事件 -->
<!-- 父的事件 -->
<test age="23" bindclick='clickEvent'></test>
<!--子的事件 -->
<test age="{{age}}" bindclick="saveEvent"></test>
.js文件
Page({
data:{
age:20
},
clickEvent(e){
console.log(e.detail)
},
saveEvent({detail}){
console.log(detail)
this.setData({
age:detail + 1
})
}
})
