在 Vue 中使用 props 将数据传递给子组件时出现问题

Question

我是 Vue Js 的新手，遇到了一个问题。 我正在使用 Axios 来获取带有JSON 占位符 API的用户数据。 在Sidebar component中。
我使用 getter 从 Vuex 商店获取用户数据。 在Sidebar component中，我有一个名为User的子组件，它将为每个传入循环的用户创建。 我正在通过 props 循环将用户数据传递给User component ，但是在访问 props 时似乎出错了。 这是错误-

这是我的代码-

Sidebar.vue- `

<template>
    <div class="sidebar">
        <div class="sidebar__info">
            <p class="sidebar__title">Поиск сотрудников</p>
            <input class="sidebar__input"/>
            <p class="results">Результаты</p>
            <div  class="results__info" v-for="users in allUsers" key="users.id" >
                <User :users="users"/>
             
            </div>
        </div>
    </div>
</template>
<script>
import User from "./User.vue"

export default {
    components: {
        User
    }, 
   computed: {
    allUsers () {
        return this.$store.getters.allUsers;
    }
   },
   async mounted() {
    this.$store.dispatch('fetchUsers')
   }
}

</script>

Vuex 商店-`

import axios from "axios";

export const userModule = {
  state: () => ({
    users: [],
    isUsersLoading: false,
  }),
  getters: {
    displayUsers: (state) => state.users,
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    },
    setLoading(state, bool) {
      state.isUsersLoading = bool;
    },
  },
  actions: {
    async fetchUsers({ state, commit }) {
      try {
        commit("setLoading", true);
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/users/"
        );
        commit("setUsers", response.data);
      } catch (e) {
        console.log(e);
      } finally {
        commit("setLoading", false);
      }
    },
  },
  modules: {},
};

User.vue- `

<template>
    <div class="user">
        <div class="user__block">
            <div class="user__img">
                <img src="../assets/img/Rectangle 4.svg"/>
            </div>
            <div class="user__info">
                <p class="user__name">{{users.name}}</p>
                <p class="user__email">Sincere@april.biz</p>
            </div>
        </div>
    </div>
</template>
<script>

  export default {
    props: users
  }
</script>

任何帮助都会很棒。

在用户组件中，我按照你说的改变了道具。 在侧边栏组件中，我更改了 getter，因为它引用了自身。 我没有做更多的改变。 出现错误User组件根本没有渲染，但是相对于请求中的对象数量需要渲染

Answer 1

您没有以正确的方式访问道具。 在任何组件中访问 props 的正确方法是数组格式或 object 格式。 例如-

第一种方式-

props: ["users"]

第二种方式-

props: {
  users: {
    required: true // depends if the prop is required or not.
    type: Object // It can be any data type
  }
}

第二种方法最好遵循，因为它带有验证。 您可以在此处阅读有关传递和访问道具的更多信息-

https://vuejs.org/guide/components/props.html