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

【问题标题】：Vue JS rc-1 Passing Data Through Props Not WorkingVue JS rc-1 通过道具传递数据不起作用
【发布时间】：2016-01-19 19:19:57
【问题描述】：

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

“继承选项已被弃用。始终将数据传递给孩子通过 props 组件。”

但是，组件 API 部分说

"$data 不能再用作道具。"

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

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

inherit: true

...到子组件。

现在，在尝试通过 props 访问父数据时，我继续碰壁。这是一个简化的例子：

app.js：

new Vue({

    el: '#app',

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

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

views/welcome.js：

module.exports = {

    props: ['authorized'],

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

views/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>
...

以这种方式根本无法识别“授权”道具。它可以在组件外部（在“app”id 内）正常工作，但不能在模板内工作。

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

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

但是，我的理解是，这是“糟糕的形式”，as the docs say：

虽然可以访问父链的任何实例，但您应避免直接依赖子组件中的父数据，并且更喜欢使用 props 显式传递数据。

那么，我需要知道的是...... 如何我可以明确地使用道具？我显然走错了路，因为如果我只是将它们列在“props：[]”数组中，它们对我的子组件不可用。我在这里想念什么？

归根结底，重构我当前的代码以替换“继承：true”并且仍然可以访问根实例数据和函数的最佳方式（标准和实践）是什么？对此的任何帮助/建议都将受到欢迎。提前致谢。

【问题讨论】：

标签： vue.js

【解决方案1】：

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

至于其余部分，（如何正确重构代码以替换'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 时，必须在 props 数组中声明这些 props，然后将它们绑定到 HTML 中的组件。

例如...

app.js：

new Vue({

    el: '#app',

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

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

views/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>

【讨论】：

构造它的好方法

【解决方案2】：

我遇到了同样的问题，但没有意识到您还必须像这样将值绑定到组件属性：

v-bind:authorized="authorized"

或简写

:authorized="authorized"

这是我一直在研究的一个示例，它说明了解决方案：http://jsfiddle.net/yyx990803/2uqmj2jj/6/

【讨论】：

谢谢，@StephenHallgren。就让道具在 HTML 中的组件内工作而言，这是正确的。所以，加一个。在重构当前代码以替换“inherit:true”方面，我在下面添加了一个额外的答案，该答案取自 Evan Y. 通过官方 vue.js 论坛。感谢您的帮助。