实例 使用 <img> 标记上的 $attrs 对象从父组件接收事件监听

<template>

  <h2>Example $attrs Object</h2>

  <p>There are three elements on the root level of the component.</p>

  <p>The v-bind="$attrs" adds a click event to the img tag, set from the parent component.</p>

  <div>

    <info-box 

      v-on:click="toggleClass"

    />

  </div>

</template>

​

<script>

export default {

  methods: {

    toggleClass(evt) {

      if(evt.target.className === 'imgLarge'){

        evt.target.className = 'imgSmall'

      }

      else {

        evt.target.className = 'imgLarge'

      }

    }

  }

}

</script>

​

<style scoped>

div {

  border: solid black 1px;

  padding: 10px;

  width: 280px;

}

</style>