Vue事件传参

小波

2年前更新

260

文章目录[隐藏]

获取event对象
事件传参
传参过程中获取event

事件参数可以获取event对象和通过事件传递参数。

获取event对象


<script>
export default {
    data() {
      return {
        number : 0,
      }
    },
    methods: {
      addnumber(event){
        console.log(event);
        this.number++
      }
    }
  }
</script>
<script>
export default {
    data() {
      return {
        number : 0,
      }
    },
    methods: {
      addnumber(event){
        console.log(event);
        this.number++
      }
    }
  }
</script>
<script>
export default {
		data() {
			return {
				number : 0,
			}
		},
		methods: {
			addnumber(event){
				console.log(event);
				this.number++
			}
		}
	}
</script>

参数里面的event可以简写为e。


addnumber(e){
        console.log(e);
        this.number++
      }
addnumber(e){
        console.log(e);
        this.number++
      }
addnumber(e){
				console.log(e);
				this.number++
			}

vue中的event对象就是JavaScript中的原生对象。

事件传参

例子：列表事件获取点击对象的值。


<template>
  <button @click="getName(item)" v-for="(item,index) in name" :key="index">
    {{ item }}
  </button>
</template>
<template>
  <button @click="getName(item)" v-for="(item,index) in name" :key="index">
    {{ item }}
  </button>
</template>
<template>
	<button @click="getName(item)" v-for="(item,index) in name" :key="index">
		{{ item }}
	</button>
</template>


<script>
export default {
    data() {
      return {
        name : ['小波','小明','小白']
      }
    },
    methods: {
      getName(name) {
        console.log(name);
      }
    }
  }
</script>
<script>
export default {
    data() {
      return {
        name : ['小波','小明','小白']
      }
    },
    methods: {
      getName(name) {
        console.log(name);
      }
    }
  }
</script>
<script>
export default {
		data() {
			return {
				name : ['小波','小明','小白']
			}
		},
		methods: {
			getName(name) {
				console.log(name);
			}
		}
	}
</script>