关于函数参数$event的使用必要性、场景差异的技术问询

本质：$event是事件信息的占位符 #

$event是Vue提供的特殊变量，用来指代原生DOM事件对象或者子组件$emit时传递的自定义参数。用不用它，完全取决于你是否需要获取事件触发时的额外信息。

场景1：原生DOM事件（如click、input） #

当你的方法需要用到原生事件的细节时，必须用$event把事件对象传递进去：

• 比如要阻止默认跳转、获取点击坐标、操作触发事件的DOM元素等。

示例（需要$event的情况）：

<v-btn @click="saveText($event)"> apply </v-btn>

<script>
methods: {
    saveText(event) { 
        // 阻止按钮的默认行为
        event.preventDefault();
        // 获取按钮的文本内容
        console.log(event.target.innerText);
    }
}
</script>

如果省略$event直接写saveText()，方法里的event参数会是undefined，依赖事件对象的逻辑就会失效。

反之，如果方法不需要任何事件信息，只是单纯执行逻辑，就完全不用$event：

<button @click="handleClick">点击触发</button>

<script>
methods: {
    handleClick() {
        console.log("按钮被点击了");
    }
}
</script>

场景2：自定义组件事件（子父组件通信） #

不用$event的情况：子组件未传递额外参数

当子组件$emit事件时没有附带参数，父组件直接绑定方法名（或带空括号的方法调用）即可：

父组件代码：

<div id="app">
    <p>Count is: {{ count }}</p>
    <HelloWorld @appendByOne="appendByOne"/>
</div>

<script>
data() {
    return { 
        count: 0,
    };
},  
methods: {
    appendByOne() {
        this.count += 1;
    }
}  
</script>

子组件代码：

<div>
    <button @click="append()">Add 1</button>
</div>

<script>
methods: {
    append() {
        this.$emit('appendByOne'); // 无额外参数
    }
}
</script>

这里父组件写@appendByOne="appendByOne()"也能正常运行，因为方法本身不需要参数。

需要$event的情况：子组件传递了额外参数

如果子组件$emit时附带了参数，父组件可以用$event显式接收，或者直接绑定方法名（Vue会自动把参数传入）：

子组件修改为传递参数：

<script>
methods: {
    append() {
        this.$emit('appendByNum', 2); // 传递参数2
    }
}
</script>

父组件接收方式1：用$event显式传递

<HelloWorld @appendByNum="appendByNum($event)"/>

<script>
methods: {
    appendByNum(num) {
        this.count += num;
    }
}
</script>

父组件接收方式2：省略$event，直接绑定方法名

<HelloWorld @appendByNum="appendByNum"/>

这种写法下，Vue会自动把子组件传递的参数作为第一个参数传给appendByNum，和用$event效果完全一致。

核心差异总结 #

内容的提问来源于stack exchange，提问作者ftouh yaham