Vue.js中$v与$event指代什么？适用场景及示例详解

Hey there! Let's break down two common Vue.js variables—$v and $event—with clear explanations, use cases, and practical examples so you know exactly when and how to use each.

First off, a critical note: $v is not part of Vue's core library—it's provided by the popular form validation library VeeValidate. It represents the validation state object for your component's form fields, giving you access to validation statuses like whether a field is valid, touched, dirty, and any error messages.

When to use $v #

• You're building forms and need real-time validation feedback (like showing error messages when a user leaves a field empty).
• You want to disable form submission until all fields meet validation rules.
• You need to check the overall validity of a form before processing it.

Example: Form Validation with $v #

Assuming you've already installed and configured VeeValidate in your Vue project:

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-group">
      <label>Username:</label>
      <input 
        v-model="username" 
        name="username" 
        rules="required|min:3"
        @blur="$v.username.touch()"
      />
      <!-- Show error if field is invalid and touched -->
      <span class="error" v-if="!$v.username.valid && $v.username.touched">
        {{ $v.username.errors[0] }}
      </span>
    </div>

    <div class="form-group">
      <label>Email:</label>
      <input 
        v-model="email" 
        name="email" 
        rules="required|email"
        @blur="$v.email.touch()"
      />
      <span class="error" v-if="!$v.email.valid && $v.email.touched">
        {{ $v.email.errors[0] }}
      </span>
    </div>

    <!-- Disable submit button if entire form is invalid -->
    <button type="submit" :disabled="$v.$invalid">Create Account</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: ''
    };
  },
  methods: {
    handleSubmit() {
      // Only proceed if form is fully valid
      if (this.$v.$valid) {
        console.log('Form submitted successfully:', { username: this.username, email: this.email });
        // Add your API call or form processing logic here
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
  font-size: 0.8rem;
}
</style>

Unlike $v, $event is a built-in Vue variable that lets you access the underlying DOM event object (for native events) or the data passed via a custom event. It's a handy way to get extra context from events without needing to bind additional data.

When to use $event #

• You need to modify or access native DOM event properties (like preventing a link from navigating, getting the coordinates of a click, or accessing an input's value directly).
• You're listening to a custom event emitted by a child component and need to capture the data sent with it.

Example 1: Native DOM Events #

Use $event to interact with browser-native events:

<template>
  <!-- Prevent default link behavior and log click position -->
  <a href="https://example.com" @click="handleLinkClick($event)">Don't navigate here</a>

  <!-- Get real-time input value without using v-model -->
  <input type="text" @input="handleInput($event)">
</template>

<script>
export default {
  methods: {
    handleLinkClick(event) {
      event.preventDefault(); // Stop the browser from opening the link
      console.log('Clicked at X:', event.clientX, 'Y:', event.clientY);
    },
    handleInput(event) {
      console.log('Current input value:', event.target.value);
    }
  }
};
</script>

Example 2: Custom Events #

Use $event to receive data from a child component's emitted event:

<!-- ChildComponent.vue -->
<template>
  <button @click="sendUserSelection">Select Me</button>
</template>

<script>
export default {
  methods: {
    sendUserSelection() {
      // Emit a custom event with data
      this.$emit('user-selected', { id: 123, name: 'Vue Developer' });
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @user-selected="handleUserSelection($event)"></ChildComponent>
    <p v-if="selectedUser">Selected User: {{ selectedUser.name }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selectedUser: null
    };
  },
  methods: {
    handleUserSelection(userData) {
      // $event here is the object sent from the child
      this.selectedUser = userData;
      console.log('Received user data:', userData);
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Sandeep Ghimire