使用 v-on 处理 Vue 事件

Question

在 Vue 中， v-on 指令 是您运行 JavaScript 以响应 DOM 事件的方式。 如果您想在用户单击按钮时运行一些代码，您应该使用 v-on，例如，假设您想在用户每次单击 重置 按钮时将输入字段重置为其默认值。 当用户单击按钮时执行 JavaScript 表达式的方法是使用 v-on:click 指令如下图所示。

const app = new Vue({
  data: () => ({ value: 'Hello, World' }),
  template: `
    <div>
      <div><input v-model="value"></input></div>
      <button v-on:click="value = 'Hello, World'">
        Reset
      </button>
    </div>
  `
});

之后的一切 v-on: 是 Vue 将要监听的事件的名称。
所以 v-on:click 注册一个监听器 原生的 点击 事件 。

'click' 事件没有什么特别之处。 您可以使用 v-on: 监听任何本地事件，例如：

• v-on:keyup
• v-on:mouseenter
• v-on:focus
• v-on:change

@ 简写

Vue 有一个方便的简写形式 v-on 这 @ 象征。 例如， @click 在功能上等同于 v-on:click，使用 @ 为您节省了几次击键，但 v-on 对于不熟悉 Vue 的人来说更具可读性。

const app = new Vue({
  data: () => ({ value: 'Hello, World' }),
  // Uses `@click` instead of `v-on:click`
  template: `
    <div>
      <div><input v-model="value"></input></div>
      <button @click="value = 'Hello, World'">
        Reset
      </button>
    </div>
  `
});

许多 Vue 代码库使用 @，所以你应该熟悉它。 但是，您应该更喜欢使用 v-on 为了可读性，除非你有一个只希望有经验的 Vue 开发人员使用的大型代码库。

使用自定义 组件

使用 $emit 向父组件发送事件 是 Vue 中数据流的核心租户。
甚至 v-model用途 v-on 在引擎盖下 。

在 Vue 方法和表达式中，您可以访问 $emit() 允许您在组件树上向父组件发出事件的函数。 在下面的示例中， input-name 组件发出一个 更新 事件。 顶级应用程序使用监听 更新 事件 v-on:update，并相应地更改名称。

Vue.component('input-name', {
  data: () => ({ name: 'World' }),
  // When you click the "Update" button, Vue will emit an event `update`
  // to the parent, with the current state of 'name'.
  template: `
    <div>
      <input type="text" v-model="name">
      <button v-on:click="$emit('update', name)">
        Update
      </button>
    </div>
  `
});

const app = new Vue({
  data: () => ({ name: 'World' }),
  // To listen to the 'update' event, you create the `input-name`
  // component with a `v-on:update` attribute. `$event` contains
  // the value of the 2nd parameter to `$emit()`.
  template: `
    <div>
      <div>
        <input-name v-on:update="setName($event)"></input-name>
      </div>
      <h1>Hello, {{name}}</h1>
    </div>
  `,
  methods: {
    // Define a method that Vue will call to handle the 'update' event.
    setName: function(v) {
      this.name = v;
    }
  }
});
app.$mount('#content');