因为当前是一个 input 注入的参数是不能直接放到 input 里面使用的所以先赋值给了 defaultValue 然后用 watch 来不停给 defaultValue 赋值达到一个父组件修改后的一个绑定
<template> <input type="text" @input="handleInput" // change @blur="handleBlur" :value="defaultValue" > </template> <script> import Emitter from '../../mixins/emitter.js' export default { name: "aiInput", mixins: [Emitter], props: { value: { type: String, default: '' } }, data(){ return { defaultValue: this.value } }, watch:{ value (val) { this.defaultValue = val; } }, methods:{ /** * change 事件 * @param event */ handleInput(event){ // 当前model 赋值 this.defaultValue = event.target.value; // vue 原生的方法 return 出去 this.$emit('input',event.target.value); // 将当前的值发送到 aiFormItem 进行校验 this.dispatch('aiFormItem','on-form-change',event.target.value) }, /** * blur 事件 * @param event */ handleBlur(event){ // vue 原生的方法 return 出去 this.$emit('blur',event.target.value); // 将当前的值发送到 aiFormItem 进行校验 this.dispatch('aiFormItem','on-form-blur',event.target.value) } } } </script>
最后
最后给上一个当前可以的使用方式
<template> <div> <button @click="changeButton">测试</button> <ai-form ref="formItems" :model="formValidate" :rules="ruleValidate"> <ai-form-item label="用户名" prop="name"> <ai-input v-model="formValidate.name"/> </ai-form-item> </ai-form> </div> </template> <script> import AiForm from "../components/form/form"; import AiFormItem from "../components/form/form-item"; import AiInput from "../components/input/ai-input"; export default { name: 'home', components: {AiInput, AiFormItem, AiForm},], data(){ return{ formValidate: { name: '123z', mail: '' }, ruleValidate: { name: [ { required: true, message: '用户名不能为空', trigger: 'blur' }, ], } } }, methods:{ changeButton(){ this.$refs.formItems.resetFields() // 清空方法 this.$refs.formItems.validate() // 验证方法 .then(res=>{ console.log(res) }) } }, } </script>
小结
可能现在小伙伴还是不懂。。俗话说;师傅领进门,修行在个人。代码上的备注写的也够多了。