Vue2子组件绑定 v-model,实现父子组件通信方式

<input v-model="firstName" />

<input
  :value="firstName"
  @input="firstName = $event.target.value"
/>

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName
      :firstName="first"
      :lastName="last"
      @update:firstName="func1"
      @update:lastName="func2"
    />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    // 默认用法
    func1(val) {
      this.first = val;
    },
    func2(val) {
      this.last = val;
    },
  },
};
</script>

<template>
  <div>
    <input v-model="first" type="text" @input="input1" />
    <input v-model="last" type="text" @input="input2" />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  props: ["firstName", "lastName"],
 
  data() {
    return {
      first: this.firstName,
      last: this.lastName,
    };
  },
  methods: {
    input1() {
      this.$emit("update:firstName", this.first);
    },
    input2() {
      this.$emit("update:lastName", this.last);
    },
  },
};
</script>

 <UserName :firstName.sync="first" />

<UserName :firstName="first" @update:firstName="val => first = val"></UserName>

this.$emit('update:firstName', newValue)

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName :firstName.sync="first" :lastName.sync="last" />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
 
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
   
  },
};
</script>

<template>
  <div>
    <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
    <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName", "lastName"],
  data() {
    return {};
  },
  methods: {},
};
</script>

 <UserName v-model="first"  />
 <!-- 上面等同于下面的写法 -->
<UserName
  :modelValue="first"
  @input="first= $event.target.value"
/>

<template>
  <div>
    <h1>{{ first }}-{{ last }}</h1>
    <UserName v-model="first"  />
  </div>
</template>
 
<script>
import UserName from "./UserName.vue";
export default {
  name: "V-Model",
  components: {
    UserName,
  },
 
  data() {
    return {
      first: "000",
      last: "123",
    };
  },
  methods: {
    
  },
};
</script>

<template>
  <div>
    <input
      type="text"
      :value="firstName"
      @input="$emit('update', $event.target.value)"
    />
  </div>
</template>
 
<script>
export default {
  name: "UserName",
  components: {},
  props: ["firstName"],
  model: {
    prop: "firstName",
    event: "update",
  },
 
  data() {
    return {};
  },
};
</script>