vue学习-自定义事件

与组件和 prop 一样，建议在父组件html使用kebab-case (短横线分隔命名)，在子组件用驼峰命名触发事件。

1.验证抛出的事件

要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效

<template>
  <div @click="click()">{{ name }}</div>
  <input type="text" v-model="name" />
  <button @click="submitForm(name)">提交</button>
</template>

<script>
export default {
  emits: {
    eventOne: null, // 没有验证

    // 验证submit 事件
    submit: (name) => {
      if (name) {
        return true;
      } else {
        console.warn("sumit验证失败");
        return false;
      }
    },
  },
  data() {
    return {
      name: "123",
    };
  },
  methods: {
    click() {
      this.$emit("eventOne", 123);
    },
    submitForm(name) {
      this.$emit("submit", name);
    },
  },
};
</script>

---

2.多个 v-model 绑定

每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项

  <emits-child
    v-model:first-name="firstName"
    v-model:last-name="lastName"
  ></emits-child>

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

<script>
export default {
  emits: {
    "update: firstName": null,
    "update: lastName": null,
  },
  props: {
    firstName: String,
    lastName: String,
  },
};
</script>

---

3.自定义修饰符

对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"，如v-model:nickFirstName就是nickFirstNameModifiers

由于v-model.capitalize，所以this.modelModifiers会是{ capitalize: true }

  <modifier-child
    v-model:nickFirstName.capitalize="firstName"
    v-model.capitalize="lastName"
  ></modifier-child>

<template>
  <div>modifier-child</div>
  <input type="text" :value="modelValue" @input="emitValue" />
  <input type="text" :value="nickFirstName" @input="emitValue2" />
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({}),
    },

    nickFirstName: String,
    nickFirstNameModifiers: {
      default: () => ({}),
    },
  },
  emits: ["update:modelValue", "update:nickFirstName"],
  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);
    },
    emitValue2(e) {
      let value = e.target.value;
      if (this.nickFirstNameModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      this.$emit("update:nickFirstName", value);
    },
  },
};
</script>