<template>
<el-card>
<el-form ref="perso" :model="personInner">
<el-row>
<el-form-item>
<el-input v-model="personInner.name" @change="namechange" />
</el-form-item>
</el-row>
<el-row>
<el-form-item>
<el-input v-model="personInner.age" @change="agechange" />
</el-form-item>
</el-row>
</el-form>
</el-card>
</template>
<script>
export default {
name: 'Objectperson',
model: {
prop: 'person',
event: 'personchange'
},
props: {
person: {
type: Object,
default: () => {}
}
},
data() {
return {
personInner: this.person
};
},
created() {
// this.personInner = this.person;
},
methods: {
namechange(e) {
this.personInner.name = e;
this.$emit('personchange', this.personInner);
},
agechange(e) {
this.personInner.age = e;
this.$emit('personchange', this.personInner);
}
}
};
</script>
<style lang="scss" scoped>
.el-input {
width: 200px !important;
}
</style>
``
<Objectperson v-model="people" />
import Objectperson from '@/components/Objectperson';
people: { name: 'jike', age: 10 }
v-model 自定义组件 传入对象值
最新推荐文章于 2024-08-16 15:49:18 发布