引入组件
父组件直接在子组件上面添加一个参数,然后传值,子组件可以直接接受到,
接收到的值可以直接用来渲染到页面上,不需要放到data 里面。
<orderBar orderBar="{{orderBar}}" bind:myEvent='orderBarEvent' />
json 文件配置组件
{
"usingComponents": {
"orderBar":"/components/orderBar/orderBar"
},
"navigationBarTitleText": "订单"
}
js 文件,
父组件自定义一个事件,然后子组件就可以通过触发事件传递参数给父组件
orderBarEvent(data){
console.log(data.detail.id)
let index = data.detail.id;
var tabs = this.data.orderBar;
// 修改样式
tabs.forEach((item, idx) => {
index == idx ? item.active = true : item.active = false;
})
this.setData({
orderBar: tabs
})
// 根据不同的id 获取 不同的订单数据
},
1 子组件触发父组件的事件
2 用properties j接受参数
properties: {
orderBar:{
type:Array,
//默认值
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
methods: {
tapItem(e){
// 获取id
var index = e.currentTarget.dataset.id;
// 触发父函数,并且传值,做相应的操作
// id 是每一个item都有的,从左到右递增。
this.triggerEvent("myEvent",{id:index})
}