vue 事件获取当前组件的属性方式

获取当前组件的属性是Vue组件中经常需要用到的操作。下面是完整的攻略过程：

1. 在Vue组件内部定义事件处理函数，事件处理函数有一个默认的参数，称为事件对象，它包含了当前的Vue实例对象。

2. 通过事件对象可以获取到该组件的属性，属性在Vue组件中存储在$this对象中。

3. 使用$this对象可访问到Vue组件的属性和方法。其中，属性可用于显示数据，方法可用于业务逻辑处理或触发其他组件的事件。

接下来，我通过两个示例说明如何获取当前组件的属性方式：

示例一：获取当前组件中data属性的属性值

<template>
  <div>
    <p>{{ message }}</p>
    <button @click='clickHandler'>Click Here</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello world!'
      }
    },
    methods: {
      clickHandler(event) {
        console.log(event.target)
        console.log(this.$data.message)
      }
    }
  }
</script>

上面的代码定义了一个简单的Vue组件，组件包含了文本和按钮两个元素。点击按钮后，触发了clickHandler事件，该事件通过console.log方法打印了事件对象和message属性的值。通过console输出结果可以看到：事件对象的target属性是点击的按钮元素，而message属性的值是hello world!。

示例二：获取当前组件中props属性的属性值

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    },
    created() {
      console.log(this.message)
    }
  }
</script>

上面的代码定义了另一个简单的Vue组件，组件只包含了文本元素，且该元素的内容是props属性中message属性的值。在created方法中，通过console.log方法打印了message属性的值。创建该组件时可以通过给message属性传值的方式，来修改该元素的内容。

总的来说，在Vue组件中获取当前组件的属性有三种方式，分别是使用data对象获取data属性的值，使用props对象获取props属性的值，以及使用computed对象获取computed属性的值。不同的Vue组件类型，使用的方式可能略有不同，但都可以通过事件对象获取到this对象。