vue如何用v-on自定事件

我是按照官网的例子写的官网的例子他抽象了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body id="app">
<!-- 子组件模板 -->
<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-msg='handleIt'></child>
</div>
</body>
    <script>
    var Vue = require('vue');

// var Child = Vue.extend({
//     props: ['msg'],
//   template:"<div>{{msg}}</div>"
// });

// var MyComponent = Vue.extend({
//   template:'<div><input type="text" v-model="pessage"/><my-e :msg="pessage"></my-e></div>',
//   components:{
//     'my-e':Child
//   }
// });

// Vue.component('my-component',MyComponent);

// 将当前消息派发出去
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      if (this.msg.trim()) {
        // this.$dispatch('child-msg', this.msg)
        this.msg = ''
      }
    }
  }
});
var vm = new Vue({
  el: '#app',
  data: {
    pessage:'',
 messages: []
    
  },
  // 在创建实例时 `events` 选项简单地调用 `$on`
  methods: {
    handleIt: function (msg) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.messages.push(msg)
    }
  }
})
    </script>
</html>

使用 v-on 绑定时，父组件不需要定义到 events 中，而是 methods。

你的用法不太对，因为你没提供源码，我抄着太费劲，正好前几天给别人写过一个例子，给你好了plunker

关键部分：

var child = {
  methods: {
    clickChild: function(){
      this.$emit('child-clicked');
    }
  },
  template: '<div><button v-on:click="clickChild">点击</button></div>'
};

var app = {
  template: '<div><child v-on:child-clicked="onClicked"></child><div>',
   methods: {
    onClicked: function(e){
       alert('child clicked');
    }
  },
  components: {
    child: child
  }
};

【热门文章】