uniapp栅格事件委托

使用@change="chooseHero“监听栅格中所有子组件的点击事件

<template>
  <view class="">
    <uni-grid :column="3" :square="false" @change="chooseHero">
    	<uni-grid-item v-for="(item,index) in hero" :index="index" :key="index">
			<view style="display: flex;flex-direction: column;">
				<image 
				style="width: 200rpx;height: 200rpx;"
				:src="`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`" mode=""></image>
				<text>{{item.name}}</text>
				<text>{{item.title}}</text>
			</view>
			
		</uni-grid-item>
    	
    </uni-grid>
  </view>
</template>

<script>


export default {
  name: '',
  data () {
    return {
	innerAudio:uni.createInnerAudioContext(),
	  hero:[],
      href:
'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js?v=43'
    }
  },
  mounted() {
  	this.getData()
  },
  methods:{
	  chooseHero(e){
		  console.log(e)
		  const index=e.detail.index
		  const {selectAudio}=this.hero[index]
		  // const innerAudio=uni.createInnerAudioContext()
		  this.innerAudio.stop()
		  this.innerAudio.src=selectAudio
		  this.innerAudio.play()
		  
	  },
     getData(){
		 uni.request({
		 	url:this.href,
			method:"GET",
			success: (res) => {
				console.log(res)
				this.hero=res.data.hero
			}
		 })
	 }
  }
}
</script>

<style lang="less" scoped>

</style>