vue@click与@click.native,及vue事件机制的使用分析

<my-component v-on:my-event="doSomething"></my-component>

<!-- 以下无论你怎么点击hello都不会触发父组件的事件的 -->
<!-- 除非加上@click="$emit('click')"，也就是触发自定义事件 -->
<template>
  <div class="hello">
    hello
  </div>
</template>
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your vue.js App" @click="clickEvent"/>
  </div>
</template>

<script>
  methods: {
    clickEvent(){
      console.log('事件触发')
    }
  }
</script>

<HelloWorld msg="Welcome to Your Vue.js App" @click.native="clickEvent"/>

<template>
  <div id="app" @customizedEvent="myEvent">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    const app = document.getElementById('app');
    const event = document.createEvent('htmlEvents');
    event.initEvent('customizedEvent', false, true);
    app.dispatchEvent(event);
  },
  methods: {
    myEvent() {
      console.log('customizedEvent')
    }
  }
}
</script>

app.addEventListener('customizedEvent', myEvent, false);

pointer-event: none

pointer-event: auto