029 V 自定义事件

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了数据验证，本次来学习自定义事件。

我们现在已经知道，从父组件向子组件通信，通过props就可以了。

但是Vue组件的通信的应用场景，不止于此，归纳起来如下图所示：

组件关系分为：父子组件通信、兄弟组件通信、跨级组件通信

当子组件需要向父组件传递数据时，就要用到自定义事件。

之前讲过的v-on除了监听DOM事件外，还可以用于组件之间的自定义事件。

父组件可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。

创建div：

1. <div id="myApp">
   
2.     <p>总计：{{total}}</p>
   
3.     <my-component v-on:increase="handleGetTotal" v-on:reduce="handleGetTotal"></my-component>
   
4. </div>

复制代码

创建组件：

1. Vue.component('my-component',{
   
2.         template:'\
   
3.         <div>\
   
4.         <button @click="handleIncrease">+1</button>\
   
5.         <button @click="handleReduce">-1</button>\
   
6.         </div>',
   
7.         data:function () {
   
8.             return{
   
9.                 counter:0
   
10.             }
    
11.         },
    
12.         methods:{
    
13.             // 增加
    
14.             handleIncrease:function () {
    
15.                 this.counter++;
    
16.                 this.$emit('increase',this.counter);
    
17.             },
    
18.             // 减少
    
19.             handleReduce:function () {
    
20.                 this.counter--;
    
21.                 this.$emit('reduce',this.counter);
    
22.             }
    
23.         }
    
24.     });

复制代码

创建Vue实例：

1. var app = new Vue({
   
2.         el:"#myApp",
   
3.         data:{
   
4.             total:0
   
5.         },
   
6.         methods:{
   
7.             handleGetTotal:function(total){
   
8.                 this.total = total;
   
9.             }
   
10.         }
    
11.     })

复制代码

子组件中有两个按钮，分别实现+1和-1效果。

在改变组件的data中“counter”后，通过$emit()把它传递给父组件。

父组件用v-on:increase和v-on:reduce。

$emit()方法的第一个参数是自定义事件的名称，例如示例的increase和reduce后面的参数都是要传递的数据。

---

课后作业


1、父组件可以向子组件通信吗？

2、组件关系分为哪三种？

3、通过v-on父组件可以直接监听子组件触发的自定义事件（T/F）

4、请用语法糖简写下面的代码：

1. <my-component v-on:increase="handleGetTotal" v-on:reduce="handleGetTotal"></my-component>

复制代码

答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

lbjstudypython

1.可以通过props进行通信
2.父子组件通信、兄弟组件通信、跨级组件通信
3.T
4.

1. <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>

复制代码

Ruide

1.可以
2.父子，兄弟，跨级
3.T
4.
<my-component @:increase="handleGetTotal" @:reduce="handleGetTotal"></my-component>

一笙彤

0

jack6666

1