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>

成果