在组件上面使用v-model

父子组件之间的通信一般也不用v-model，但是今天在看文档的时候看到了这个，随手记录一下：
v-model是下面代码的语法糖

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

父子组件通信的时候，在父组件上面使用v-model

<template>
  <div id="con">
    <p>{{ text }}</p>
    <child v-model="text"></child>
  </div>
</template>

<script>
import child from "./aa.vue";
export default {
  name: "bb",
  props: {},
  components: { child },
  data: function () {
    return {
      text: "我是父组件",
    };
  },
  created() {},
  methods: {},
  computed: {},
};
</script>

<style lang="less" scoped></style>

子组件:

<template>
  <div class="child">
    <p>{{ msg }}</p>
    <el-button @click="btnClick">点击改变父组件内容</el-button>
  </div>
</template>

<script>
export default {
  model: {
    prop: "msg",
    event: "respond",
  },
  props: {
    msg: {
      type: String,
    },
  },
  methods: {
    btnClick() {
      this.$emit("respond", "我是子组件");
    },
  },
};
</script>

<style lang="less" scoped></style>

注意：子组件中有个model，它是v-model通信至关重要的条件，他有两个属性，prop是传过来的属性，event是子组件要发射的事件名称，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。这样就可以实现父子组件之间的通信，子组件可以拿到父组件传过来的值，子组件也可以更改值。