前端必读 | this.data 和 this.props，Vue 状态的奥秘

前端

2023-10-23 08:10:28

Vue 中的状态

在 Vue 中，组件的状态分为两类：本地状态和共享状态。本地状态是指只属于该组件的私有数据，而共享状态是指在多个组件之间共享的数据。

this.data：本地状态

this.data 是 Vue 组件的私有状态。它存储着与该组件相关的数据，例如组件的属性、方法和计算属性。this.data 的值在组件创建时初始化，并且只能在该组件内部访问。

this.props：共享状态

this.props 是 Vue 组件的共享状态。它存储着从父组件传递给子组件的数据。this.props 的值在组件创建时初始化，并且只能在该组件内部访问。

this.data 和 this.props 的区别

this.data 和 this.props 的主要区别在于它们的作用域不同。this.data 是私有状态，只能在该组件内部访问，而 this.props 是共享状态，可以在多个组件之间共享。

如何使用 this.data 和 this.props

在 Vue 中，我们可以通过以下方式使用 this.data 和 this.props：

在组件的模板中，我们可以使用 {{ this.data.property }} 和 {{ this.props.property }} 来访问 this.data 和 this.props 中的数据。
在组件的 JavaScript 代码中，我们可以使用 this.data.property 和 this.props.property 来访问 this.data 和 this.props 中的数据。
在组件的方法中，我们可以使用 this.data.property 和 this.props.property 来访问 this.data 和 this.props 中的数据。

示例

以下是一个使用 this.data 和 this.props 的示例：

<template>
  <div>
    <p>Name: {{ this.data.name }}</p>
    <p>Age: {{ this.props.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe'
    }
  },
  props: ['age']
}
</script>

在这个示例中，我们在组件的模板中使用了 {{ this.data.name }} 和 {{ this.props.age }} 来访问 this.data 和 this.props 中的数据。在组件的 JavaScript 代码中，我们使用了 this.data.name 和 this.props.age 来访问 this.data 和 this.props 中的数据。