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

获取当前组件的属性是Vue中常见的操作之一。下面是Vue中获取当前组件属性的完整攻略。

方式一：$event对象

可以通过$event对象来获取当前组件属性。$event是事件回调函数的第一个参数，它是原生DOM事件对象的包装。我们可以从这个对象中获取各种属性。

例如，我们有一个input组件：

<input type="text" name="username" v-on:input="handleInput" />

然后在methods属性中定义一个处理函数：

methods: {
  handleInput(e) {
    console.log(e.target.name) // 输出 username
  }
}

这里的e参数就是$event对象，可以通过e.target获取当前组件的DOM节点，再通过DOM节点的属性来获取组件的属性。

方式二：$refs对象

可以使用$refs对象来获取当前组件属性。$refs是实例中注册过的子组件引用对象。(注意是注册过的组件)

例如，我们有一个组件：

<template>
  <div>
    <input type="text" name="username" v-model="username" />
    <button @click="handleClick">click me</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    handleClick() {
      console.log(this.$refs.input.name) // 输出 username
    }
  }
}
</script>

这里在组件模板中注册了一个引用名为"input"的input组件。在methods属性中可以使用this.$refs获取到该组件，再通过属性来获取组件的属性。

示例说明：

<template>
  <div>
    <input type="text" name="username" v-model="username" @click="getMyName"/>
    <h3>{{ name }}</h3>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: 'example',
      name: ''
    }
  },
  methods: {
    getMyName(event) {
      this.name = event.target.name
    }
  }
}
</script>

上述示例中，当文本框被点击时，会触发getMyName方法，在该方法中通过$event对象获取到当前的name属性，并将值赋给组件中的name属性。最终会渲染到h3标签中。

<template>
  <div>
    <input type="text" name="username" v-model="username" ref="input" />
    <button @click="handleClick">click me</button>
    <h3>{{ name }}</h3>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      name: ''
    }
  },
  methods: {
    handleClick() {
      this.name = this.$refs.input.name
    }
  }
}
</script>

上述示例中，在文本框下面有一个按钮，点击按钮后触发handleClick方法，通过$refs对象获取到该组件并获取该组件的name属性，最终渲染到h3标签中。