Vue中如何绑定事件 传递参数

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

基础用法：

<div id="APP">
	<button v-on:click="add">添加</button>
	<p>您已购买 {{num}} 件</p>
</div>

注：使用 v-on:xxx 绑定事件，其中 xxx 是事件名。事件函数 add 如果不需要传递参数，() 小括号可以省略不写。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num: 0,
		}
	},
	methods:{
		add: function(){
			this.num++;
		},
	},
});

注：事件函数需要写在 methods 对象中，事件函数最终会在 vm 上。如果需要使用 data 中的数据，可以用 this.xxx 操作数据，其中 xxx 是数据名。

v-on 指令简写【常用方式】

<div id="APP">
	<button @click="add">添加</button>
	<p>您已购买 {{num}} 件</p>
</div>

注：v-on: 可以简写为 @ 符。变为 @xxx 绑定事件，其中 xxx 是事件名。

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num: 0,
		}
	},
	methods:{
		add(){
			this.num++;
		},
	},
});

注：事件的回调可以简写为 add(){ } 的形式，与之效果相同。

 事件函数中的 this

事件函数中的 this 默认指向 vm ，也就是 Vue 实例对象 或者 组件实例对象。

<div id="APP">
	<button @click="add">添加</button>
	<p>您已购买 {{num}} 件</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num: 0,
		}
	},
	methods:{
		add(){
			console.log(this); // Vue
			this.num++;
		},
	},
});

注：data 中的数据相当于都在 Vue 实例上，而 this 又指向 Vue 实例，所以我们才能通过 this.num 操作 data 中的 num 数据。

另外注意 methods 中配置的函数，不要用箭头函数！否则 this 就不是 Vue 实例了。

<div id="APP">
	<button @click="add">添加</button>
	<p>您已购买 {{num}} 件</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num: 0,
		}
	},
	methods:{
		add:() => {
			console.log(this); // window
			this.num++;
		},
	},
});

注：现在的 this 指向 window ，而 window 中没有 num 这个数据，所以 this.num++ 不会发生任何变化。一定不要使用箭头函数！不要使用箭头函数！不要使用箭头函数！

 事件对象 Event

<div id="APP">
	<button @click="add">添加</button>
	<p>您已购买 {{num}} 件</p>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			num: 0,
		}
	},
	methods:{
		add(e){
			console.log(e.target); // <button>添加</button>
			this.num++;
		},
	},
});

注：在不传递参数时，可以直接接收 event 事件对象。

 原创作者：吴小糖

 创作时间：2023.2.23