vue如何实现一个自定义组件的v-model，v-model原理解析！

v-model指令的原理是什么？

1. v-bind绑定一个value属性
2. v-on监听当前元素的input事件，当数据变化时，将值传递给value实时更新数据

v-model和v-bind:value有什么区别？

自定义组件中，必定会使用v-bind指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我一直有个疑惑， 既然有的v-bind指令，为什么还需要在自定义的组件中实现v-model指令呢？在我实践了一番之后，我才明白， v-model既能够实现值的传递，也能够实现页面数据的实时变化，而v-bind只是实现值的传递，如果需要实现实时变化的效果， 需要使用另外的方法修改变量的值，可以总结为下面两点

1. v-model实现视图和数据的双向绑定，一者变化另一者也会同时变化
2. v-bind只会在初始化的时候将数据绑定到视图上，后续视图变化不会影响数据

现在我们来撸一个自定义的v-model

父组件

<template>
  <div class="test4">
    test4
    <br />
    <child4 v-model="vModelValue"></child4>
    <br />
    <button @click="getValue">获取当前v-model绑定的值</button>
  </div>
</template>

<script>
import child4 from "../components/child4.vue";
export default {
  data() {
    return {
      vModelValue: "初始的v-model",
    };
  },
  components: {
    child4,
  },
  created() {},
  methods: {
    getValue() {
      console.log(this.vModelValue);
    },
  },
};
</script>

<style lang="css" scoped>
.test4 {
  background-color: burlywood;
}
</style>

子组件

<template>
  <input type="text" :value="val" @input="onInputChange" />
</template>

<script>
export default {
  // model配置可以定义v-model的属性名及事件名
  model: {
    prop: "val", // 定义传递给v-model的那个变量，绑定到哪个属性值上               (默认值value)
    event: "onChangeVal", // event:什么时候触发v-model行为(让父组件能获取到值)    (默认值input)
  },
  props: {
    val: {
      type: String,
    },
  },
  created() {
    console.log(this.val);
  },
  methods: {
    onInputChange(e) {
      this.$emit("onChangeVal", e.target.value); //触发v-model的行为
    },
  },
};
</script>

<style lang="css" scoped>
.test4 {
  background-color: burlywood;
}
</style>

效果