v-model实现原理 自定义组件使用v-model

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/smlljet/article/details/91817055

            </div>
                                                <!--一个博主专栏付费入口-->
         
         <!--一个博主专栏付费入口结束-->
        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-4a3473df85.css">
                                    <div id="content_views" class="markdown_views prism-atom-one-light">
                <!-- flowchart 箭头图标 勿删 -->
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                                        <p>v-model只是一个语法糖，等于:<strong>value+@input</strong>，真正的实现靠的还是： <strong>v-bind:绑定响应式数据，触发 input 事件并传递数据 (核心和重点)</strong></p>

<input v-model="something">

 
 

 
 
1

其实和下面一样的

<input :value="something"  @:input="something = $event.target.value">

 
 

 
 
1

因此，对于一个带有 v-model 的输入框组件，它应该：接收一个 value prop，触发 input 事件，并传入新值

自定义myInput组件

<template>
  <div style="padding-top: 100px;">
    <button @click="minu"  class="btn">-</button>
        <input type="text" :value="currentValue" @input="handleInput" />
    <button @click="plus" class="btn">+</button>
  </div>
</template>
<script>
export default {
  props:['value'],
    data () {
    return {}
  },
  computed:{
  	currentValue:function(){
  		return this.value
  	}
  },
  methods:{
  	handleInput:function(event){
  		var value = event.target.value;
  		console.log(988898)
      	this.$emit('input', value); //触发 input 事件，并传入新值
  	},
  	minu:function(){
        var value = this.currentValue - 1 
  		this.$emit('input', value);
  	},
  	plus:function(){
        var value = this.currentValue + 1 
  		this.$emit('input', value);
  	},
  }
}
</script>
<style type="text/css">
	.btn{
		width: 60px;
	}
</style>

 
 

 
 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在页面使用

<template>
  <div class="hello">
  	<myInput v-model='name'></myInput>
  	{{name}}
  	<myInput v-model='othername'></myInput>
  	{{othername}}
  </div>
</template>
<script>
import myInput from "@/components/myInput";
export default {
  name: 'HelloWorld',
  data () {
    return {
     name:10,
     othername:6,
    }
  },
  components: {
   myInput
  }, 

methods:{
}
}
</script>
<style scoped>

</style>

• 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
• 27
• 28
• 29

效果

总结：
自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以)，然后给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
                </div>