如何用组件定义属性？

Question

我目前在表单中需要按顺序显示三个步骤，因此我创建了三个组件 - 一个用于流程的每个步骤。

我的 app.js 文件：

import LocationList from './components/LocationList.vue';
import ChooseTime from './components/ChooseTime.vue';
import ChooseMethod from './components/ChooseMethod.vue';

Vue.component('location-list', LocationList);
Vue.component('choose-time', ChooseTime);
Vue.component('choose-method', ChooseMethod);

let store = {
    isVisible: {
        steps: {
            one: true,
            two: false,
            three: false,
        }
    }
};

new Vue({
    el: '#app-order',

    data: store,

    router
});

现在，当我的唯一一条路线被调用时，

从'vue-router'导入VueRouter；

let routes = [
    {
        path: '/order',
        component: require('./views/Order.vue')
    }
];

export default new VueRouter({
    routes
});

所有这些组件都被正确加载。问题是当我尝试一次v-show他们时：

Order.vue：

<template>

    // ...

    <location-list v-show="isVisible.steps.one"></location-list>
    <choose-time v-show="isVisible.steps.two"></choose-time>
    <choose-method v-show="isVisible.steps.three"></choose-method>

    // ...

</template>

<script>
</script>

<style>
</style>

我收到的错误信息是：

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

但是当我在 Vue 的浏览器扩展中检查时，isVisible 是在根元素中定义的？

如您所见，它位于根元素中，但不在 Order 视图中。

感谢您的帮助！

Answer 1

在 Vue 中，子组件无法直接访问其父组件中定义的数据。您必须向下传递数据。

我想如果你只是在Order.vue 中定义了isVisible，你可能会省去一些麻烦。但是，如果您想将其保留在原处，则需要将其传递给组件。

一种简单的方法是将isVisble 定义为Order.vue 的属性，然后将其传递给您的router-view。

<router-view :is-visible="isVisible"></router-view>

还有其他方法可以将 props 传递给 defined in the router documentation 的路由。

我说在Order.vue 中定义isVisible 可以省去一些麻烦的原因是，每当您想更改步骤的值时，都需要在根目录下进行，因为您目前已经定义了它.