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

   
   
   
   

   
   
   
   

    
    
    
    
1
   
   
   
   

其实和下面一样的

   
   
   
   

   
   
   
   

    
    
    
    
1
   
   
   
   

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

自定义myInput组件

   
   
   
   

   
   
   
   

    
    
    
    
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
   
   
   
   

在页面使用

 
 
  
 
  
 
   
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 作为事件。