如何用组件定义属性？

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中，子组件无法直接访问其父项中定义的数据。你必须传递数据。

如果您刚刚在isVisible中定义Order.vue，我想您可能会省去一点麻烦。但是，如果要将其保留在原来的位置，则需要将其传递给组件。

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

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

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

我之所以说你会在isVisible中定义Order.vue时遇到麻烦的原因是因为每当你想改变你的步骤的价值时，你需要在你的根处做这件事。目前已定义。