v-model语法糖实现
index.vue中:
<template>
<div>
<PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode"/>
//v-model方式和下列方式等效
<PersonInfo
:phone-info="phoneInfo"
:zip-code="zipCode"
@change="val => (phoneInfo = val)"
@update:zipCode="val => (zipCode = val)"
/>
phoneInfo:{
{phoneInfo}}
<br />
zipCode: {
{zipCode}}
</div>
</template>
<script>
import PersonalInfo from "./PersonalInfo";
export default {
components: {
PersonalInfo
},
data() {
return {
phoneInfo: {
areaCode: "+86",
phone:""
},
zipCode:""
};
}
}