Question

在release notes for Vue 1.0.0-rc.1中，我们被告知

＆＃34;不推荐使用inherit选项。总是将数据传递给孩子组件通过道具。＆＃34;

但是，组件API部分说

＆＃34; $ data不能再用作道具。＆＃34;

我一直在尝试将数据传递给我的根Vue实例的子组件，并且没有任何运气。

在版本0.12。*中，如果您想要/需要访问父实例的数据，方法等，您只需添加...

inherit: true

...到儿童部分。

现在，在试图通过道具访问父数据时，我继续打砖墙。这是一个简化的例子：

app.js：

new Vue({

    el: '#app',

    data: {
        authorized: false,
        currentView: 'welcome-view'
    },

    components: {
        'welcome-view': require('./views/welcome')
    }
});

视图/ welcome.js：

module.exports = {

    props: ['authorized'],

    template: require('./welcome.template.html')
};

视图/ welcome.template.html：

<div v-if="authorized"><p>You Are Logged In</p></div>
<div v-else>Please Log In</div>

主视图文件（app.blade.php）

...
  <body id="app">
      <component :is="currentView"></component>
  </body>
...

授权＆＃39;支柱不会以这种方式被识别。它在组件之外工作（在＃34; app＆＃34; id中）就好了，但不在模板中。

目前，我可以在需要的地方使用 $ root 来访问我需要的数据。例如：

<div v-if="$root.authorized"><p>You Are Logged In</p></div>

但是，我的理解是，这是一种糟糕的形式＆＃39;四周，as the docs say：

虽然可以访问父链的任何实例，但是应避免直接依赖子组件中的父数据更喜欢使用道具明确地传递数据。

所以，我需要知道的是...... 如何我能明确地使用道具吗？我显然是以错误的方式进行，因为如果我只是将它们列在道具中，它们就不适用于我的孩子组件：[]＆＃39;阵列。我在这里错过了什么？

最终，重构当前代码以替换继承的最佳方式（标准和实践）是什么：true＆＃39;，仍然可以访问根实例数据和函数？对此的任何帮助/建议都是最受欢迎的。提前谢谢。

Answer 1

请参阅@ StephenHallgren在此页面上的答案，了解在HTML中访问道具的正确方法。

至于其余部分，（如何正确地重构代码以替换'inherit：true'，我在the answer I received from Evan Y.包括the official Vue forum，以防其他人在将来遇到此问题

他对上述问题的回答是：

如果您对结构非常肯定，可以使用   $ root.authorized。

或者，不要将授权状态放在根目录中。有   用户状态的专用模块，可以在任何用户状态中导入   零件。看到   http://rc.vuejs.org/guide/application.html#State_Management

我对此的看法是 - 如果有具体的全局变量不会改变，且应用程序结构合理，则可以使用 $ root （或 $ parent 视情况而定），并且 - 如果元素的状态有时会发生变化（例如用户是否被授权/登录），关键是使用状态管理模块。

同时，当传递父和子之间的道具时，必须在props数组中声明道具，然后将它们绑定到HTML中的组件。

例如......

<强> app.js ：

new Vue({

    el: '#app',

    data: {
        authorized: false,
        currentView: 'welcome-view'
    },

    components: {
        'welcome-view': require('./views/welcome')
    }
});

<强>视图/ welcome.js ：

module.exports = {
    props: ['authorized'],
    template: require('./welcome.template.html') 
}

<强> welcome.template.html ：

<div v-if="authorized"><p>You Are Logged In</p></div>
<div v-else>Please Log In</div>

主要HTML

<body id="app">
    <component :is="currentView" v-bind:authorized="authorized"></component>
</body>

（或简写）

<body id="app">
    <component :is="currentView" :authorized="authorized"></component>
</body>

Answer 2

我遇到了同样的问题，并没有意识到你还必须将值绑定到组件prop这样：

v-bind:authorized="authorized"

或简写

:authorized="authorized"

以下是我一直在努力解决问题的示例：http://jsfiddle.net/yyx990803/2uqmj2jj/6/

Vue JS rc-1通过道具传递数据不起作用

2 个答案: