欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序父组件获取子组件的点击事件——子组件给父组件传值

程序员文章站 2024-03-15 11:04:53
...

以下为举例:

//子组件的wxml:
<view class="work_list">
		<block wx:for="{{workList}}" wx:key="index">
			<view class="work_li" bindtap='showWork' data-id="{{item.Id}}">
                这是一个例子!!!
			</view>
		</block>
	</view>

子组件wxml中绑定了showWork事件,在js中调用方法如下:


Component({
  properties: {//父级组件传来的参数
    workList: {
      type: Array,
      value: []
    },
  },
  data: {
    work_tabindex: 0, //当前tab序号
  },
  methods: {
    showWork(e){//点击弹出作品弹窗
      this.triggerEvent('showWork',e.currentTarget.dataset.id)
    }
   
  }
})

父组件首先在wxml里接收triggerEvent里面传来的showWork,然后调用事件,方法如下:

//父组件的wxml
<List workList="{{work_list}}"  bind:showWork="show_work"></List>

然后,父组件要在js里面执行show_work:

show_work(e) {
    console.log(e.detail);//这里输出的值对应子组件传来的id
  },