Vue.js 在方法中访问数据

Vue.js 是一款流行的前端 JavaScript 框架，它采用 MVVM 设计模式，可以轻松实现数据的双向绑定。在 Vue.js 中，我们可以直接在模板中访问数据，但是有时候我们也需要在 JavaScript 方法中访问数据。本文将介绍如何在 Vue.js 的方法中访问数据。

通过 this 访问数据

在 Vue.js 的组件中，我们可以通过 this 访问组件实例中的数据。在 Vue.js 实例创建时，所有的数据都会被绑定到组件实例上，因此可以通过 this 直接访问。

export default {
  data() {
    return {
      username: 'John',
      age: 25,
    };
  },
  methods: {
    logUser() {
      console.log(this.username); // "John"
    },
    logAge() {
      console.log(this.age); // 25
    },
  },
};

以上代码演示了在 methods 中通过 this 访问组件实例中的数据。logUser 方法中访问了 username 数据，logAge 方法中访问了 age 数据。在组件实例中添加数据时，这些数据都会被绑定到组件实例上，因此我们可以通过 this 直接访问它们。

通过 $data 访问数据

除了通过 this 访问数据外，我们还可以通过 $data 来直接访问组件实例中的数据。$data 是 Vue.js 实例中响应式数据对象的代理，可以在组件实例中任意访问响应式数据对象中的数据。

export default {
  data() {
    return {
      username: 'John',
      age: 25,
    };
  },
  methods: {
    logUser() {
      console.log(this.$data.username); // "John"
    },
    logAge() {
      console.log(this.$data.age); // 25
    },
  },
};

以上代码演示了如何通过 $data 访问组件实例中的数据。logUser 方法中访问了 username 数据，logAge 方法中访问了 age 数据。$data 是 Vue.js 实例中响应式数据对象的代理，可以在组件实例中任意访问响应式数据对象中的数据。

通过 $refs 访问数据

在 Vue.js 中，我们可以通过 $refs 来访问组件中的 DOM 元素。在组件实例中引入 ref 属性后，我们可以将组件中的 DOM 元素绑定到 ref 对象上，并在 Vue.js 方法中通过 $refs 访问 DOM 元素中的数据。

<template>
  <div>
    <input ref="myInput" v-model="username" />
    <button @click="logInput">Log Input</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    logInput() {
      console.log(this.$refs.myInput.value); // 输入框中的文本
    },
  },
};
</script>

以上代码演示了如何在 Vue.js 方法中使用 $refs 访问组件中的 DOM 元素。在组件中引入 ref 属性后，我们可以将组件中的 DOM 元素绑定到 ref 对象上，并在 Vue.js 方法中通过 $refs 访问 DOM 元素中的数据。

总结

在 Vue.js 组件中，我们可以通过 this、$data 和 $refs 来访问组件中的数据。this 访问的是组件实例中的数据，$data 访问的是 Vue.js 实例中响应式数据对象的代理，$refs 访问的是组件中的 DOM 元素。在实际开发中，我们可以根据具体的场景选择适合自己的访问方式。