关于vue.js:vue30-自定义事件

一、自定义事件实现验证抛出事件

咱们写一个自定义事件、该事件旨在创立一个流动。假如咱们的邮箱和明码是必填项。咱们通过自定义事件在验证完邮箱和明码之后将 form 表单数据传递给父组件。

页面成果如下：

<custom-form @submit="submitData"></custom-form>

咱们最终想要的成果是想要在数据验证通过在父组件中调用 submitData 办法，从而进行提交。
当初咱们把焦点聚焦在 custom-form 组件中。以下是 custom-form 组件的具体实现代码：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="流动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="明码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="流动区域">
      <el-select v-model="form.region" placeholder="请抉择流动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="流动工夫">
      <el-col :span="11">
        <el-date-picker type="date" placeholder="抉择日期" v-model="form.date1" style="width: 100%"></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-time-picker placeholder="抉择工夫" v-model="form.date2" style="width: 100%"></el-time-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
 
    <el-form-item label="流动性质">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食 / 餐厅线上流动" name="type"></el-checkbox>
        <el-checkbox label="地推流动" name="type"></el-checkbox>
        <el-checkbox label="线下主题流动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="非凡资源">
      <el-radio-group v-model="form.resource">
        <el-radio label="线上品牌商资助"></el-radio>
        <el-radio label="线下场地收费"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="流动模式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(form.email, form.password)"> 立刻创立 </el-button>
      <el-button> 勾销 </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import {ElMessage} from 'element-plus'
 
  export default {data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          email: 'xxx@163.com',
          password: '',
        },
      }
    },
    methods: {submitForm(email, password) {this.$emit('submit', { email, password})
      },
    },
    emits: {
      click: null,
      submit: ({email, password}) => {if (email && password) {return true} else {
          ElMessage({
            message: 'Invalid submit event payload!',
            type: 'warning',
          })
          return false
        }
      },
    },
  }
</script>

咱们应用 email 和 password 进行邮箱和明码输出值的绑定。同时在点击立刻创立按钮时调用 submit 先进行数据校验。待数据校验通过当前，再将数据传递给父组件进行提交操作。

二、v-model 参数

接下来咱们实现组件上的 v-model 应用 modelValue 作为 prop 和 update:modelValue 作为事件来实现自定义组件 v -model 参数的配置与传递。页面成果如下：

咱们在父组件中引入 model-eimits 组件，并将 v -model 参数 title、region、type 传给 model-emits 组件。

<model-emits v-model:title="title" v-model:region="region" v-model:type="type"></model-emits>

以下是 model-emits 组件的具体代码：

<template>
  <div style="margin: 20px"></div>
  <el-form label-width="80px" :model="formLabelAlign">
    <el-form-item label="流动题目">
      <input :value="title" @input="$emit('update:title', $event.target.value)" class="v-input" />
    </el-form-item>
    <el-form-item label="流动区域">
      <input :value="region" @input="$emit('update:region', $event.target.value)" class="v-input" />
    </el-form-item>
    <el-form-item label="流动模式">
      <input :value="type" @input="$emit('update:type', $event.target.value)" class="v-input" />
    </el-form-item>
  </el-form>
</template>
<script>
  export default {data() {
      return {
        formLabelAlign: {
          region: '',
          type: '',
        },
      }
    },
    props: {
      title: String,
      region: String,
      type: String,
    },
    emits: ['update:title', 'update:region', 'update:type'],
  }
</script>
<style scoped>
  .v-input {
    border: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    width: 100%;
    border-radius: 4px;
  }
</style>

以上咱们通过 emits 自定义 update:title、update:region、update:type 事件在实现 v -model 参数的动态变化。

三、v-model 修饰符

接下来咱们用自定义事件实现 v -model 修饰符将输出的首字母主动转为大写。页面成果如下：

<model-modifier v-model:letter.capitalize="text"></model-modifier>

在父组件中引入 v -model 修饰符组件 model-modifier，从而用自定义事件实现 letter 的首字母主动转为大写成果。以下是 model-modifier 的具体代码：

<template>
  <div style="margin: 20px"></div>
  <el-form label-width="80px">
    <el-form-item label="字母">
      <input :value="letter" @input="emitValue" class="v-input" />
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    props: {
      letter: String,
      letterModifiers: {default: () => ({}),
      },
    },
    emits: ['update:letter'],
    methods: {emitValue(e) {
        let value = e.target.value
        if (this.letterModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)
        }
        this.$emit('update:letter', value)
      },
    },
    created: function () {console.log(this.letterModifiers)
    },
  }
</script>
<style scoped>
  .v-input {
    border: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    width: 100%;
    border-radius: 4px;
  }
</style>

通过 letterModifiers 判断是否须要修饰符，在触发 input 事件时进行首字母的转换，并触发自定义事件 update:letter 将解决后的数据传递给父组件 letter 变量。

以上是对于自定义事件的理论应用场景，心愿能帮到您！