vue中的v-model原理,与组件自定义v-model详解

v-model是Vue.js中常用的指令之一，它可以在表单控件元素上创建双向数据绑定。当表单控件元素的值发生变化时，绑定的数据也会随之变化，反之亦然。v-model的实现原理是通过在表单控件元素上监听input或者change事件，然后将表单控件元素的值同步到Vue实例中的数据上。

在组件中使用v-model时，需要使用props属性将父组件中的数据传递给子组件，然后在子组件中使用$emit方法触发自定义事件，将子组件中的数据传递给父组件。具体实现可以参考以下代码：

// 父组件
<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>父组件中的message值为：{{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

// 子组件 CustomInput.vue
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: String
  }
}
</script>

在上述代码中，父组件中使用了自定义组件CustomInput，并将父组件中的message数据通过v-model绑定到CustomInput组件中。在CustomInput组件中，使用props属性接收父组件传递的数据，并在input元素上使用:value绑定props中的value值，同时监听input事件，通过$emit方法触发自定义事件input，并将input元素的值作为参数传递给父组件。