首先是父组件传值给子组件
//子组件.wxml
<text>{{name}}</text>
//子组件.js
Component({
/**
* 组件的属性列表
*/
properties: {
name:String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
//父组件.wxml
<view class="container">
<Head name="{{motto}}" bindevent="on"></Head>
</view>
//父组件.json
{
"component": true,
"usingComponents": {Head:'子组件路径'}
}
//父组件.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
motto:'父组件的数据'
},
/**
* 组件的方法列表
*/
methods: {
}
})
子组件传值给父组件
//父组件.wxml
<view class="container">
<Head name="{{motto}}" bindevent="on"></Head>
</view>
//父组件.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
on:function(e){
console.log(e.detail)//打印子组件数据
}
}
})
//子组件.wxml
<text>{{name}}</text>
<button bindtap="click">点击</button>//触发函数
//子组件.js
Component({
/**
* 组件的属性列表
*/
properties: {
name:String
},
/**
* 组件的初始数据
*/
data: {
count:1
},
/**
* 组件的方法列表
*/
methods: {
click:function(){
this.triggerEvent('event',{name:'xxx'})
}
}
})