微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

 <view class='wx_dialog_container' hidden="{{!isShow}}">
 <view class='wx-mask' bindtap='close'></view>
 <view class='wx-dialog'>
 <text class='li' bindtap='groupClick' wx:for="{{items}}" data-index='{{index}}' wx:for-item="item">{{item.department}}</text> 
 </view>
 </view>

.wx_dialog_container{
 width: 100%;
 height: 100%;
 z-index: 999;
}
.wx-mask{
 position: fixed;
 z-index: 1000;
 top: 0;
 right: 0;
 left: 35%;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
 position: fixed;
 min-width: 528rpx;
 height: 100%;
 left: 0;
 top:314px;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: #FFFFFF;
 text-align:left;
}
.wx-dialog .li{
 display: block;
 font-size: 18px;
 margin-top:28px;
 margin-left:154px;
}

Component({
 properties: {
 
 },
 data: {
 isShow: false,
 animationData: {},
 color:"#000",
 items:[
 { department: '研发部'},
 { department: '设计部' },
 { department: '人事部'},
 { department: '销售部' },
 { department: '市场运营部' },
 ]
 },

 methods: {
 show: function () {
 this.setData({
 isShow: true
 });
 },
 
 close: function () {
 this.setData({
 isShow: false
 })
 },

 // 自定义组件与页面之间的数据通信
 groupClick: function (e){
 var group = this.data.items[e.target.dataset.index]
 console.log(group)
 // 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项
 this.triggerEvent('okEvent', { group}, {})
 
 
 this.setData({
 isShow: false

 })
 },
 
 },
})

{
 "component": true
}

// 接受triggerEvent 方法触发的自定义组件事件来更新同步数据
 okEvent: function (e) {
 console.log(e)
 this.setData({
 groupName: e.detail.group.department
 })
 
 },

 onReady: function () {
 this.dialog = this.selectComponent('#dialog');
 },