关于vuejs的自定义事件的问题!!

Summer
  • 218

自定义事件

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

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

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

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


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

评论
阅读 9.2k
3 个回答

这里只是改变了父组件监听子组件事件的方式而已。写在父组件中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)
    }
  }
*/
})

这里的handleIt你可以理解为一个函数名,也就是你自定义的函数名。这个函数写在methods里面。

按照我的理解:当你触发子组件的child-msg方法时会同时触父组件的handleIt方法

宣传栏