030 V 自定义事件之v-model

不二如是

                               
登录/注册后可看大图

上一讲我们通过原生Vue实现了自定义事件，本次学习通过v-model实现。

从Vue 2.x开始可以在自定义组件上使用v-model指令，稍微修改一下上一讲的代码：

1. <div id="myApp">
   
2.     <p>总数：{{total}}</p>
   
3.     <my-component v-model="total"></my-component>
   
4. </div>
   
5. 
   
6. <script>
   
7.     Vue.component('my-component',{
   
8.         template:'<button @click="handleClick">+1</button>',
   
9.         data:function () {
   
10.             return{
    
11.                 counter:0
    
12.             }
    
13.         },
    
14.         methods:{
    
15.             handleClick:function(){
    
16.                 this.counter++;
    
17.                 this.$emit('input',this.counter);
    
18.             }
    
19.         }
    
20.     });
    
21. 
    
22.     var app = new Vue({
    
23.         el:"#myApp",
    
24.         data:{
    
25.             total:0
    
26.         }
    
27.     })
    
28. </script>

复制代码

仍然是单击按钮，增加1的效果，不过这次组件$emit()的事件名是特殊的“input”。

在使用组件的父级，并没有在<my-component>上使用@input="handler"，而是直接用了v-model绑定的一个数据total。

v-model还可以用来创建自定义的表单输入组件，进行双向数据绑定，例如：

1. <div id="myApp">
   
2.     <p>总数：{{total}}</p>
   
3.     <my-component v-model="total"></my-component>
   
4.     <button @click="handleReduce">-1</button>
   
5. </div>
   
6. 
   
7. <script>
   
8.     Vue.component('my-component',{
   
9.         props:['value'],
   
10.         template:'<input :value="value" @input="updateValue">',
    
11.         methods:{
    
12.             updateValue:function (event) {
    
13.                 this.$emit('input',event.target.value);
    
14.             }
    
15.         }
    
16.     });
    
17. 
    
18.     var app = new Vue({
    
19.         el:"#myApp",
    
20.         data:{
    
21.             total:0
    
22.         },
    
23.         methods:{
    
24.             handleReduce:function () {
    
25.                 this.total--;
    
26.             }
    
27.         }
    
28.     })
    
29. </script>

复制代码

实现这样一个具有双向绑定的v-model组件要满足下面两个要求：

1、接受一个value属性
2、在有新的value时出发input事件

---

课后作业


1、在Vue 2.x中不可以在自定义组件中使用v-model指令（T/F）

2、补充？处代码：

1. Vue.？('my-component',{
   
2.         template:'<button @click="handleClick">+1</button>',
   
3.         data:function () {
   
4.             return{
   
5.                 counter:0
   
6.             }
   
7.         },
   
8.         methods:{
   
9.             handleClick:function(){
   
10.                 this.counter++;
    
11.                 this.$？('input',this.counter);
    
12.             }
    
13.         }
    
14.     });

复制代码

3、实现可以双向绑定的v-model需要满足哪两个条件？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.F
2.component emit
3.接受一个value属性
在有新的value时出发input事件

Ruide

1.F
2.

1. Vue.component('my-component',{
   
2.         template:'<button @click="handleClick">+1</button>',
   
3.         data:function () {
   
4.             return{
   
5.                 counter:0
   
6.             }
   
7.         },
   
8.         methods:{
   
9.             handleClick:function(){
   
10.                 this.counter++;
    
11.                 this.$emit('input',this.counter);
    
12.             }
    
13.         }
    
14.     });

复制代码

3.接受一个value属性；在有新的value时触发input事件

一笙彤

0

jack6666

1