业务场景 父组件文本框与子组件文本框内容同步更新
直接上代码
父組件
<template>
<div style="padding:30px">
<div>我是父组件</div>
<a-input v-model="parent" style="width:30%" placeholder="我是父组件"></a-input>
<children v-model="parent" :parent="parent"></children>
</div>
</template>
<script>
import {Input} from "ant-design-vue"
import children from "./children"
export default {
components: {
aInput: Input,
children
},
data() {
return {
parent: ""
}
}
}
</script>
子组件
<template>
<div style="margin-top: 30px">
<div>我是子组件</div>
<a-input
v-model="parentVal"
style="width: 30%"
placeholder="我是子组件"
></a-input>
</div>
</template>
<script>
import { Input } from "ant-design-vue";
export default {
components: {
aInput: Input,
},
props: {
parent: {
type: String,
default: ''
}
},
data() {
return {
parentVal: ""
};
},
watch: {
parent(newVal, oldVal){
this.parentVal = newVal
},
parentVal(newVal, oldVal){
this.$emit("input", newVal)
}
},
};
</script>