Vue.js 中 this 的妙用：轻松访问 data 和 method 属性

2023-11-21 08:42:29

理解 this 的本质

在 Vue.js 中，this 指向当前实例。它就像一个容器，封装了当前组件或实例的所有属性和方法。当你在组件或实例中使用 this，你实际上就是在访问它内部的数据和行为。

访问 data 和 method 属性

this 最常用的功能之一就是访问 data 和 method 属性。data 属性存储了组件或实例的状态数据，而 method 属性则包含了组件或实例的方法。你可以通过 this 来访问这些属性，就像这样：

// 访问 data 属性
this.message = 'Hello, world!'

// 访问 method 属性
this.greet()

this 在组件通信中的妙用

在 Vue.js 中，this 还可以用于组件通信。当你在子组件中使用 this，你可以访问父组件的数据和方法，就像这样：

// 子组件中
this.$parent.message = 'Hello from child!'

// 父组件中
this.$children[0].greet()

this 在代码复用中的妙用

this 还可以在代码复用中发挥作用。你可以通过创建一个 mixin，并将它包含在多个组件中，来实现代码复用。在 mixin 中，你可以定义一些通用的属性和方法，然后在各个组件中使用 this 来访问它们，就像这样：

// mixin.js
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}

// 组件 A
import mixin from './mixin.js'

export default {
  mixins: [mixin],
  // ...
}

// 组件 B
import mixin from './mixin.js'

export default {
  mixins: [mixin],
  // ...
}