Vue自定义组件实现v-model

前言

v-model 实际上就是 $emit('input') 以及 props:value 的组合语法糖。

1.封装自定义组件

要在 Vue 中实现自定义组件的 v-model 功能，你可以通过使用 model 选项来定义组件的 prop 和事件。以下是一个示例代码，演示如何实现一个自定义组件并使用 v-model 来进行双向绑定：

<template>
  <div>
    <input :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在上面的示例中，我们创建了一个简单的自定义输入框组件，通过 value prop 来接收父组件传递的值，并通过 updateValue 方法来触发 input 事件并将新的值传递给父组件。在组件的 model 选项中，我们定义了 prop 和事件的名称，以便 Vue 知道如何处理 v-model。

2.使用自定义组件

在父组件中，你可以像下面这样使用自定义组件，并通过 v-model 来进行双向绑定：

<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>Input value: {{ inputValue }}</p>
  </div>
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

通过以上方式，你可以在 Vue 中实现自定义组件的 v-model 功能，实现双向绑定的效果。

3.完善自定义组件

问题
上面有一个问题是props是单向数据流，不应该在一个子组件内部改变 props！

优化完善如下

<template>
  <div>
	<input type="number" :value="currentValue" @input="changeValue"/>
  </div>
</template>

<script>
export default {
	props:{
	  value:{
	    type: Number
	  }
	},
	computed(){
	  return {
	    currentValue: this.value
	  }
	}
	methods:{
	  changeValue(e){
	    this.currentValue = parseInt(e.target.value);
	    this.$emit('input', this.currentValue);
	  }
	}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26