<div id="app">
  <!-- <child @handle="btnClick"></child> -->
  <child @click.native="ysClick"></child>
</div>
Vue.component("child", {
  // template: '<div @click="handleClick">child</div>',
  template: "<div>child</div>",
  methods: {
    // handleClick: function(){
    //   alert("handleClick/子组件事件",)
    //   this.$emit("handle")
    // }
  }
});

var app = new Vue({
  el: "#app",
  data: {
    mess: "hello world"
  },
  methods: {
    ysClick: function () {
      alert("ysClick/原生事件");
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js