下面就是实战案例,直接复制出去即可
父组件
<!-- parent -->
<template>
<div>
<el-form :model="formData" :rules="rules" ref="ruleForm">
<Child prop="give" v-model="formData.give"></Child>
</el-form>
<button @click="submitForm()">立即创建</button>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
components: {
Child,
},
data() {
return {
rules: {
give: [
{ required: true, message: '请输入', trigger: ['blur', 'change'] },
],
},
formData: {
give: 3
}
};
},
methods: {
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
}
});
},
},
watch: {
'formData.give' (newVal) {
console.log('父组件值发生变化了:', newVal)
}
},
};
</script>
子组件:
<template>
<div>
<el-form-item label="我对父组件说:" :prop="prop">
<!-- <el-radio-group v-model="value" @change="handleChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group> -->
<el-input v-model="value" @input="handleChange"></el-input>
</el-form-item>
</div>
</template>
<script>
export default {
props: {
// 接收父组件的值
value:{
type: [Number, String]
},
// 接收父组件的校验
prop: {
type: String,
},
},
methods: {
handleChange (val) {
this.$emit('input', val)
},
}
};
</script>
<style scoped></style>
网友评论