vue 中 props 的使用，保姆教程

在 Vue.js 中，this.$props 用于访问组件接收到的 props（即父组件传递给子组件的属性）。它是一个包含所有传入属性的对象，类似于 this.$attrs 和 this.$emit 等其他 Vue 实例属性。以下是对 this.$props 的详细解释，包括其用途、注意事项以及与 props 选项的区别。

1. 什么是 this.$props

• 定义：this.$props 是 Vue.js 实例的一个属性，用于访问当前组件接收到的所有 props。
• 用途：允许你在组件的脚本部分动态地访问和操作传入的 props。

2. 使用场景

• 动态访问：在组件的脚本中，需要根据传入的 props 动态地执行某些逻辑时，可以使用 this.$props。
• 调试：在调试过程中，查看当前组件接收到的所有 props。
• 高级用例：在某些高级用例中，可能需要访问所有 props 而不仅仅是单独定义的 props。

3. 示例

3.1 定义和接收 Props

首先，定义一个子组件并接收一些 props：

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    // 使用 this.$props 访问所有 props
    console.log(this.$props);
    // 输出: { name: 'Alice', age: 30 }
  },
  methods: {
    logProps() {
      // 也可以在方法中使用 this.$props
      console.log(this.$props.name, this.$props.age);
    }
  }
};
</script>

3.2 父组件传递 Props

在父组件中，使用子组件并传递 props：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent name="Alice" :age="30" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

4. 与 props 选项的区别

• props 选项：

  • 定义在组件的选项中，用于声明组件接收的 props。
  • 例如：

    props: {
      name: String,
      age: Number
    }
    

  • 在模板中直接使用 {{ name }} 或 {{ age }} 来访问。

• this.$props：

  • 是一个包含所有传入 props 的对象。
  • 可以在脚本的任何地方访问，例如在生命周期钩子、方法或计算属性中。
  • 例如：

    mounted() {
      console.log(this.$props.name); // 输出: 'Alice'
    }
    

5. 注意事项

1. 响应性：

   • this.$props 是响应式的，即当父组件更新 props 时，this.$props 会自动反映最新的值。
   • 但是，直接修改 this.$props 是不推荐的，因为 props 是单向数据流，从父组件传递到子组件。

2. 不可变性：

   • 通常，props 是只读的，不应该在子组件中修改它们。如果需要修改数据，应该使用 data、computed 或 emit 事件来通知父组件进行更改。

3. 性能：

   • 虽然 this.$props 提供了方便的访问方式，但在性能敏感的场景下，频繁访问 this.$props 可能会带来轻微的性能开销。通常，直接使用定义的 props 更为高效。

4. 类型检查：

   • 如果使用 TypeScript 或其他类型检查工具，直接使用定义的 props 会提供更好的类型检查支持，而 this.$props 则是一个通用的对象，可能缺乏类型信息。

6. 高级用法

6.1 使用 this.$props 进行动态处理

在某些情况下，可能需要根据传入的 props 动态地执行某些操作。例如：

methods: {
  handleProps() {
    if (this.$props.name) {
      // 执行某些逻辑
    }
  }
}

6.2 合并 Props 和其他数据

可以在计算属性中合并 props 和其他数据：

computed: {
  fullName() {
    return `${this.$props.firstName} ${this.$props.lastName}`;
  }
}

7. 总结

this.$props 是一个有用的属性，允许在组件的脚本中访问所有传入的 props。尽管如此，为了更好的代码可读性、可维护性和性能，建议在大多数情况下直接使用在 props 选项中定义的 props。只有在确实需要动态访问所有 props 时，才使用 this.$props。

8. 完整示例

以下是一个完整的示例，展示如何使用 this.$props：

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <el-button type="primary" @click="logProps">Log Props</el-button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 0
    }
  },
  methods: {
    logProps() {
      console.log(this.$props);
      // 输出: { name: 'Alice', age: 30 }
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent name="Alice" :age="30" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

在这个示例中，当用户点击按钮时，logProps 方法会输出当前接收到的 props。