vue中的$event

问题来源

组件库封装的Icon组件，需要使用修饰符.stop阻止冒泡，但使用时报错，$event为undefined

DOM中event 对象的获取方式（以下两种方式chorme都支持）

1. 回调函数的形参（IE8及以下浏览器不支持）

methods: {
      e_Click(evt) {
        console.log(evt);
      }
    }

2. window.event - 挂载到window对象上（Firefox不支持）

methods: {
      e_Click() {
       const evt = window.event;
        console.log(evt);
      }
    }

普通元素中的$event

绑定函数无参数 - event对象作为默认作为参数传递

<template>
  <div class="hello" @click="e_Click">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    methods: {
      e_Click(evt) {
        console.log(evt);
      }
    }
  }
</script>

绑定函数有其它参数 - 使用$event传递

<template>
  <div class="hello" @click="e_Click('hello组件',$event)">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    methods: {
      e_Click(value,event) {
        console.log(value,event);
      }
    }
  }
</script>

组件中的$event

子组件

<template>
  <div class="hello" @click="e_Click">
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    methods: {
      e_Click() {
        this.$emit('click');
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
    <HelloWorld @click="e_ChildClick('hello',$event)"/>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    methods:{
      e_ChildClick(value,event){
        console.log("子组件点击事件：",value,event); // hello undefined
      }
    }
  }
</script>

以上写法,$event为undefined，当然事件修饰符也不能使用，因为子组件中的click方法并没有把event暴露出来。

修正后 - 子组件

<template>
  <div class="hello" @click="e_Click">
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    methods: {
      e_Click(event) {
        this.$emit('click',event); // 将event对象传递出去
      }
    }
  }
</script>