vue.js - 关于vuejs的自定义事件的问题！！

问题描述

问 题

自定义事件

使用 v-on 绑定自定义事件

上例非常好，不过看着父组件的代码， "child-msg" 事件来自哪里不直观。如果我们在模板中子组件用到的地方声明事件处理器会更好。为了做到这点，子组件可以用 v-on 监听自定义事件：

<child v-on:child-msg="handleIt"></child>

这让事情非常清晰：当子组件触发了 "child-msg" 事件，父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中；子组件只关注触发事件。

---

这一块看得不是很明白，能给个例子吗。。。

解决方案

这里只是改变了父组件监听子组件事件的方式而已。写在父组件中events不能显示知道是哪个子组件来的事件，而直接写在模板中<child v-on:child-msg='handleIt'></child>则能清楚的知道handleIt就是处理这个child来的child-msg事件的（假如有多个子组件都会发送child-msg消息，并且父组件对其做不同处理时，这种情况就有表达优势了）

<!-- 子组件模板 -->
<template id="child-template">
  <input v-model="msg">
  <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父组件模板 -->
<div id="events-example">
  <p>Messages: {{ messages | json }}</p>
  <!-- <child></child> 这里不需要了 -->
  <child v-on:child-msg="handleIt"></child>
</div>

var parent = new Vue({
  el: '#events-example',
  data: {
    messages: []
  },
  // 新添加handleIt方法 
  methods: {
    handleIt: function(msg) {
        this.messages.push(msg);
    }
  }
/* 这里也不需要了
  // 在创建实例时 `events` 选项简单地调用 `$on`
  events: {
    'child-msg': function (msg) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.messages.push(msg)
    }
  }
*/
})

这篇关于vue.js - 关于vuejs的自定义事件的问题！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！