vue自定义组件v-model的实现

在Vue中，v-model是一个用于自定义组件的指令，它可以让父组件在子组件上使用类似于原生输入框的双向绑定语法。要实现自定义组件的v-model，你需要在子组件中使用model选项。

以下是实现自定义组件的v-model的基本步骤：

1、定义子组件： 需要在子组件中定义一个用于接收外部值的属性，以及一个用于向外部发送值的事件。

<template>  <input :value="value" @input="$emit('input', $event.target.value)"></template><script>export default {  props: ['value'], // 接收外部值}</script>

2、使用model选项： 在子组件中，通过model选项来指定将哪个属性绑定到v-model中的值，并指定更新该值的事件。

<script>export default {  props: ['value'],  model: {    prop: 'value', // 将 value 属性与 v-model 的值绑定    event: 'input' // 指定更新 value 的事件为 input  }}</script>

3、在父组件中使用自定义组件： 父组件可以像使用原生输入框一样，使用 v-model 绑定子组件的值。

<template>  <div>    <custom-input v-model="message"></custom-input>    <p>Value from child component: {{ message }}</p>  </div></template><script>import CustomInput from './CustomInput.vue';export default {  components: {    CustomInput  },  data() {    return {      message: ''    };  }}</script>

在上述示例中，CustomInput组件就具备了类似于原生输入框的双向绑定功能，父组件中的message数据会同步更新到子组件中，并且子组件中的输入会反映到父组件的message数据中。

这就是如何实现Vue自定义组件的v-model功能。通过model选项，你可以自定义绑定属性和事件，从而实现双向绑定的自定义组件。