周陆军博客

Appearance

Return to top
On this page

组件事件 component-events

阅读此章节时，我们假设你已经读过组件基础，若你对组件还完全不了解，请先阅读它。

在 Vue School 上观看免费课程

触发与监听事件 emitting-and-listening-to-events

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

vue
<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用：

javascript
export default {
  methods: {
    submit() {
      this.$emit('submit')
    }
  }
}

父组件可以通过 v-on (缩写为 @) 来监听事件：

vue
<MyComponent @some-event="callback" />

同样，组件的事件监听器也支持 .once 修饰符：

vue
<MyComponent @some-event.once="callback" />

像组件与 prop 一样，事件的名字也提供了自动的转换。请注意，我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

TIP

和原生 DOM 事件不太一样，组件触发的事件不会冒泡。你只能监听直接子组件触发的事件。

事件参数 event-arguments

有时候我们会需要在触发事件时附带一个特定的值。举个例子，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个值作为额外的参数：

vue
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此时可以访问到事件附带的参数：

vue
<MyButton @increase-by="(n) => count += n" />

或者用一个方法来作为事件处理函数：

vue
<MyButton @increase-by="increaseCount" />

然后，可以从方法的第一个参数上取到这个值：

javascript
methods: {
  increaseCount(n) {
    this.count += n
  }
}
javascript
function increaseCount(n) {
  count.value += n
}

TIP

所有传入 $emit() 的额外参数都会被直接传向监听器。举个例子，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

声明触发的事件 declaring-emitted-events

组件要触发的事件可以显式地通过 defineEmits() 宏emits 选项来声明：

vue
<script setup>
defineEmits(['inFocus', 'submit'])
</script>

我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用：

vue
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

该 defineEmits() 宏不能在子函数中使用，他必须直接放置在 <script setup> 中，如上面的例子所示。

如果你显式地使用了 setup 函数而不是 <script setup>，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上：

javascript
export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

与 setup() 上下文中的其他 property 一样，emit 可以安全地被解构：

javascript
export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}
javascript
export default {
  emits: ['inFocus', 'submit']
}

这个 emits 选项还支持对象语法，它允许我们对触发事件的参数进行验证：

vue
<script setup>
const emit = defineEmits({
  submit(payload) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
  }
})
</script>

如果你正在搭配 <script setup> 使用 TypeScript，也可以使用纯类型标注来声明触发的事件：

vue
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

更多细节：如何为组件所抛出事件标注类型

javascript
export default {
  emits: {
    submit(payload) {
      // 通过返回值为 `true` 还是为 `false` 来判断
      // 验证是否通过
    }
  }
}

你也可以看看这一章了解如何为组件所抛出的事件标注类型。

尽管是可选的，我们还是推荐你定义所有要触发的事件，以此更好地在代码中描述和呈现组件的作用。这也使得 Vue 能更好地将事件和透传 attribute 作出区分。

TIP

如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。

事件校验 events-validation

和对 prop 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 this.$emitemit 的内容，返回一个布尔值来表明事件是否合法。

vue
<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>
javascript
export default {
  emits: {
    // 没有校验
    click: null,

    // 校验 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}

配合 v-model 使用 usage-with-v-model

自定义事件可以用来创建对应 v-model 的自定义输入：

vue
<input v-model="searchText" />

和下面这段代码是等价的：

vue
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

当使用在一个组件上时，v-model 是这样做的：

vue
<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

为了使组件能像这样工作，内部的 <input> 组件必须：

  • 绑定 value attribute 到 modelValue prop
  • 输入新的值时在 input 元素上触发 update:modelValue 事件

这里是相应的代码：

vue
<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
vue
<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

现在 v-model 也可以在这个组件上正常工作了：

vue
<CustomInput v-model="searchText" />

在演练场中尝试一下

在演练场中尝试一下

另一种在组件内实现 v-model 的方式是使用一个可写的 computed property，给出 getter 和 setter。get 方法需返回 modelValue property 而 set 方法需触发相应的事件：

vue
<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>
vue
<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" />
</template>

v-model 的参数 v-model-arguments

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字：

vue
<MyComponent v-model:title="bookTitle" />

在这个例子中，子组件应该有一个 title prop，并通过触发 update:title 事件更新父组件值：

vue
<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

在演练场中尝试一下

vue
<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

在演练场中尝试一下

多个 v-model 绑定 multiple-v-model-bindings

通过我们刚才在 v-model 参数小节中学到的，利用一个特定的 prop 和一个特定事件，可以在一个组件上创建多个 v-model 双向绑定：

每一个 v-model 都会同步不同的 prop，而不需要在组件上写更多额外的选项：

vue
<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
vue
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

在演练场中尝试一下

vue
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

在演练场中尝试一下

处理 v-model 修饰符 handling-v-model-modifiers

当我们在学习输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。然而在某些场景下，你可能想要添加自定义的修饰符。

我们一起来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：

vue
<MyComponent v-model.capitalize="myText" />

要给组件的 v-model 添加修饰符，都可以通过 modelModifiers prop 在组件内访问到。在下面的例子中，我们会创建一个包含 modelModifiers prop 的组件，它的默认值是一个空对象：

vue
<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

defineEmits(['update:modelValue'])

console.log(props.modelModifiers) // { capitalize: true }
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
vue
<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

注意这里组件的 modelModifiers prop 包含了 capitalize 且其值为 true，因为它在模板中的 v-model 绑定上被使用了。

此时和 prop 相关的已经准备完毕，我们可以开始检索 modelModifiers 对象的 key 并写一个处理函数来改变抛出事件附带的值。在下面的代码里我们就是在每次 <input/> 元素抛出 input 事件时执行大写首字母：

vue
<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

在演练场中尝试一下

vue
<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

在演练场中尝试一下

对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。举个例子：

vue
<MyComponent v-model:title.capitalize="myText">

则相应的声明应该是：

javascript
const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }
javascript
export default {
  props: ['title', 'titleModifiers'],
  emits: ['update:title'],
  created() {
    console.log(this.titleModifiers) // { capitalize: true }
  }
}