第十八篇 vue - 深入组件

触发与监听事件

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

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

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

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

和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案

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

export default {
  methods: {
    submit() {
      this.$emit("someEvent")
    }
  }
}

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

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

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

事件参数

有时候我们会需要在触发事件时附带一个特定的值，在这个场景下，我们可以给 $emit 提供一个额外的参数

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

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

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

或者，也可以用一个组件方法来作为事件处理函数：

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

该方法也会接收到事件所传递的参数：

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

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

声明触发的事件

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

export default {
  emits: ["inFocus", "submit"]
}

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

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

尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况

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

事件校验

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

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

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 使用

自定义事件可以用于开发支持 v-model 的自定义表单组件

<input v-model="searchText" />

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)

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

而当使用在一个组件上时，v-model 会被展开为如下的形式

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

要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事

1、将内部原生 input 元素的 value attribute 绑定到 modelValue prop

2、输入新的值时在 input 元素上触发 update:modelValue 事件

这里是相应的代码

<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"]
}
</script>

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

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

<CustomInput v-model="searchText" />

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的计算属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件

<!-- 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>

多个 v-model 绑定

利用刚才在 v-model 参数小节中学到的技巧，我们可以在一个组件上创建多个 v-model 双向绑定，每一个 v-model 都会同步不同的 prop

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<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 修饰符

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

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