vue -- $emit input 与 v-model（父组件文本框与子组件文本框内容同步更新）

业务场景 父组件文本框与子组件文本框内容同步更新

直接上代码

父組件

<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>

修改父组件文本框内容 子组件同步更新

修改子组件文本框内容 父组件同步更新