【Vue】 自定义组件的 v-model 的理解

app.vue

<template>
  <div class="app">
    <div>我是app.vue文件</div>
    <p>
      我是父组件：
      <input type="text" v-model="msg" />
    </p>
    <br />
    <!-- <son :txt="msg" @valChange="msg = $event"></son> -->
    <!-- 这是相当于上面的简写 -->
    <son v-model="msg"></son>
  </div>
</template>
<script>
import son from "./son.vue";
export default {
  components: {
    son
  },
  data() {
    return {
      msg: "123"
    };
  },
  methods: {}
};
</script>

<style>
.app {
  width: 500px;
  height: 300px;
  border: #000 2px solid;
}
</style>

son.vue

<template>
  <div class="son">
    我是son.vue文件
    <p>
      我是子组件：
      <input type="text" :value="txt" @input="changeinput" />
    </p>
    <br />
  </div>
</template>

<script>
export default {
  props: ["txt"], //父组件传进来的值
  model: {
    prop: "txt", //相当于父组件，自动生成 :txt="值"
    event: "valChange" //相当于父组件，自动生成 @change='值'
  },
  methods: {
    changeinput(event) {
      // console.log(event.target.value)
      this.$emit("valChange", event.target.value); //获取input中的值发送给父组件
    }
  }
};
</script>

<style>
.son {
  width: 500px;
  height: 150px;
  background-color: pink;
}
</style>