如何使变量可用于此 Vue 3 应用程序中的孙组件？

Question

我正在开发 Vue 3 应用程序。我运行在使用 父组件 、子组件和 孙组件 .

时遇到问题

在Main.vue（父组件）中：

<template>
    <div class="main">
        <h1>{{ title }}</h1>
        <Filters
         :usersData='users' 
        />
    </div>
</template>

<script>
    import Filters from './Ui/Filters'
    export default {
      name: 'Posts',
      components: {
        Filters
      },
      props: {
        title: String,
      },
    }
</script>

在子组件中 Filters.vue:

<template>
    <label>Filter by author</label>
    <MyDropdown
        label="All authors" 
        :usersData='users'
        />
</template>

<script>
    import MyDropdown from './MyDropdown'
    import MyButton from './MyButton'

    export default {

      name: 'Filters',

      components: {
        MyDropdown,
        MyButton
      },

      props: {
        usersData: Object
     },

    data() {
        return {
          url: 'https://jsonplaceholder.typicode.com',
          users: [],
        }
    },
    async mounted() {
        // Users
        await this.axios.get(`${this.url}/users`).then((response) => {
          if (response.status == 200) {
            this.users = response.data;
            console.log(this.users); // outputs the users correctly
          }
        }).catch((errors) => {
          console.log(errors);
        });
      }
    }
</script>

Tn 孙组件 MyDropdown.vue:

<template>
  <div class="dropdown">
    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
       {{ label }}
    </button>
    <ul v-if="usersData.length" class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Jane Doe</a></li>
        <li><a class="dropdown-item" href="#">John Doe</a></li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: 'MyDropdown',
      props: {
        label: String,
        usersData: Object
      }
    }
</script>

问题

只要 v-if="usersData.length 存在，我就会在控制台中收到此错误：

无法读取未定义的属性（正在读取 'length'）

我的错误在哪里？

Answer 1

首先，如果只是为了避免 MyDropDown grandchild 组件中的错误，您可以在 usersData 变量之后添加一个 ?，例如 v-if="usersData?.length" .这将消除您的 Can't read length of undefined 错误。

接下来是您尝试将道具从 parent 传递到 child 组件的方式。您正在将 users 数据传递给 Filters 组件标签的 usersData 道具，但试图在组件中将道具作为 filterData 获取，这将无法按预期工作。因此 users 被认为具有 undefined 值并且与您的 grandchild 相同，这会导致您的 grandchild 即 MyDropDown 组件出错。

尝试正确映射 prop 名称并避免变量名称与任何组件内的 prop 名称重复。

如果您尝试将数据从 parent 直接发送到 grandchild，您可以使用 Vue.js 的 Provide/Inject 功能。
在这里找到更多关于它的信息 Provide/Inject | Vue.js

Answer 2

v-if="usersData?.length > 0"

试试这个或

v-if="usersData.length > 0"

如何使变量可用于此 Vue 3 应用程序中的孙组件？

How do I make a variable available to a grandchild component in this Vue 3 application?

javascript

vue.js

vuejs3

问题

我的错误在哪里？