13518219792
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法
专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，成都网站设计、网站建设负责任的成都网站制作公司!
子组件：
//内容部分
子组件js部分
export default {
data () {
return {
formCustom: {
age: ''
},
ruleCustom: {
age: [
{ required: true, message: '年龄不为空', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
const form = this.formCustom
// 在这将事件传递出去
this.$emit('submit', form)
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}父组件：
//子组件
父组件js部分
import modalContent from '子组件位置（这里没写）'
export default {
components: { modalContent },
data () {
return {}
},
methods: {
// 子组件的点击触发事件
handleSubmit(form) {
this.$Message.success('Success!');
}
}
} 遇到某些xiagn要将按钮写在父组件上，但又需要调用子组件做验证之类的时候可以借鉴一下，验证请忽略，这里主要是按钮的事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
