关于vue.js:vue如何实现一个自定义组件的vmodelvmodel原理解析

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>

成果