Javascript 如何使用组件定义属性？

我现在有三个步骤，我想按顺序显示，所以我创建了三个组件-流程的每个步骤一个

我的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路由器”导入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的浏览器扩展中检查时，isVisible是在根元素中定义的吗

正如您所看到的，它位于根元素中，但不在Order视图中

---

谢谢你的帮助

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

我想，如果您只是在

Order.vue

中定义

isVisible

，可能会为自己省去一点麻烦。但是，如果要将其保留在原来的位置，则需要将其传递到组件中

一种简单的方法是将

isvisable

定义为

Order.vue

的属性，然后将其通过

路由器视图

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

还有其他方法可以将道具传递给需要的路线

---

我之所以说您可以省去定义

isVisible

顺序的麻烦。vue是因为无论何时您想要更改步骤的值，您都需要在当前定义的根目录下进行更改。

是否在某个步骤组件模板中引用了

isVisible

？否，我只有一个基本的文件结构，比如

。我没有在itI的任何地方引用

isVisible

，我认为目前发布的内容没有问题。我有，但不幸的是，这是一个私人问题。我可以稍后复制这个问题并在回购协议中分享，但我只是用一些更详细的信息更新了这篇文章。我认为问题可能是因为Order视图不包含isVisible属性，只包含根父元素。我是Vue的新手，所以我很抱歉！是的，这就是问题所在。您需要将

isVisible

传递到

Order.vue

，或者在那里完全定义它。我同意，我觉得在组件中定义它会更好。我只需将isVisible对象移动到Order.vue，并将其放在mounted（）方法中？@Chris只需在components数据中定义它

data（）{return{isVisible:…}}

非常感谢！

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