分享
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
placeholder: {
type: String,
default: () => undefined
}
},
computed: {
// 支持 v-model 双向数据绑定,如果有新数据会通过 $emit 一个 input 事件进行修改 v-model 的值,也就是当前 value 值。
// 写法是固定的,vue 自动处理,只管通过 $emit(‘input’, newValue) 抛出去新的值即可。
currentValue: {
get () {
return this.value
},
set (newValue) {
this.$emit(‘input’, newValue)
}
}
},
watch: {
// 监听当前值变化,及时提交给父组件
currentValue: {
deep: true,
immediate: true,
handler: function (newValue) {
// 记录最新的值
this.valuePro = newValue
// 判断当前的 value 值是否为 undefined, 如果是的话不用抛出去,要不然 form 标签就会走效验,并提示对应的错误了
if (newValue !== undefined) {
// v-decorator 会通过 change 事件接受新值
this.$emit(‘change’, newValue)
}
}
}
},
data () {
return {
// 当前页面值,用于做桥梁使用的
// 当前页面操作修改的就是这个值,外部传进来也会更新这个值,它变化了在通过 input change 去更新外部的值
valuePro: undefined
}
},
methods: {
// input 输入
inputChange (e) {
// 传出去最新值,这里只需要通过 change 事件传出去即可,内部的 value 也会发生变化
this.$emit(‘change’, e.target.value)
}
}
}
home.vue
:进行使用
<a-form
:form=“form”
:label-col=“{ span: 3 }”
:wrapper-col=“{ span: 5 }”
@submit=“handleSubmit”
<a-input
placeholder=“请输入名称”
v-decorator=“[‘name’, { rules: [{ required: true, message: ‘请输入名称!’ }] }]”
/>
<custom-input
placeholder=“请输入简介”
v-decorator=“[‘info’, { rules: [{ required: true, message: ‘请输入名称!’ }] }]”
/>
Submit