一般表单页面和提交表单的提交按钮都是在同一个页面，我这个demo是模拟那种类似于表单是一个子组件弹层，提交按钮在父组件中，下面是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element-ui开发: 表单在子组件，确定按钮在父组件, 处理表单校验</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<child ref="child"></child>
<el-button type="primary" @click="submitFun">确认</el-button>
</div>
<script>
// 子组件-----------------------------------------------------------------------------------------------
Vue.component('child', {
template:
`
<div>
<el-form ref="dataForm" :inline="true" label-width="80px" :model="temp" label-position="left" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model.trim="temp.name" show-word-limit maxlength="45" type="text" placeholder="请输入姓名" />
</el-form-item>
</el-form>
</div>
`,
name: 'child',
props: {
},
data() {
return {
// 表单数据
temp: {
name: ''
},
rules: {
name: [{ required: true, message: '姓名不能为空' }]
}
}
},
methods: {
}
})
// 父组件-----------------------------------------------------------------------------------------------
new Vue({
name: 'parent',
el: '#app',
data() {
return {
attrs2: '接收父组件里数据'
}
},
methods: {
// 赠品弹层点击确认
async submitFun() {
const result = this.$refs['child'].$refs['dataForm'];
let verify;
try {
verify = await result.validate();
} catch (err) {
verify = err
};
if(typeof verify && verify == true) {
console.log(this.$refs['child'].temp, '表单数据')
}
},
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。