Vue.js 从数据中访问 props - Javascript

在 Vue.js 中，Props 是从父组件传递到子组件的，可以被视为子组件的输入。在子组件内部，可以使用 this 对象来访问 props 中的数据。

访问单个 prop

在子组件中访问单个 prop 的方式很简单，可以通过 this.$props 或 this.$attrs 对象来获取父组件传递过来的 prop 值。以下是一个示例：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ["message"],
  mounted() {
    console.log(this.$props.message);
    console.log(this.$attrs.message);
  },
};
</script>

上面的代码中，props 配置会在子组件内创建一个与 prop 名称相同的本地变量，你可以在模板中使用该变量。同时，this.$props 也可以用来获取 props 中的数据。

访问多个 prop

当子组件需要访问多个 prop 时，可以使用扩展操作符 ... 来访问 props。以下是一个示例：

<template>
  <div>
    {{ message }}
    {{ name }}
    {{ age }}
  </div>
</template>

<script>
export default {
  props: ["message", "name", "age"],
  mounted() {
    const { message, name, age } = this.$props;
    console.log(message, name, age);
  },
};
</script>

在上面的代码中，我们使用了对象的解构语法来获取所有 props 中的数据。

访问所有 prop

如果你想要访问所有传递给子组件的 prop，你可以使用 $attrs 来访问。以下是一个示例：

<template>
  <div>
    <h1 v-for="(value, key) in $attrs" :key="key">
      {{ key }}: {{ value }}
    </h1>
  </div>
</template>

<script>
export default {
  props: ["message", "name", "age"],
};
</script>

在上面的代码中，我们使用了 v-for 循环来遍历 $attrs 对象中的所有键值对，并将它们显示在页面上。

结论

在 Vue.js 中，我们可以通过 this.$props 或 this.$attrs 对象来访问父组件传递给子组件的 prop 数据。如果你只需要访问单个 prop，你可以直接使用 this.propName 来访问。如果你需要访问多个 prop，你可以使用扩展操作符 ... 或者对象解构语法来访问。如果你希望访问所有传递给子组件的 prop，你可以使用 $attrs 来访问。