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

Question

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

"The inherit option has been deprecated. Alway pass data to child components via props."

但是，组件 API 部分显示

"$data can no longer be used as a prop."

我一直在尝试将数据传递到我的根 Vue 实例的子组件，但没有成功。

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

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

'authorized' 属性完全无法识别。它在组件外部（在 "app" id 内）工作正常，但在模板内不起作用。

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

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

但是，我的理解是周围都是 'bad form'，as the docs say:

Although it’s possible to access any instance the parent chain, you should avoid directly relying on parent data in a child component and prefer passing data down explicitly using props.

所以，我需要知道的是... 我如何明确地使用道具？我显然以错误的方式处理它，因为如果我只是将它们列在 'props: []' 数组中，它们对我的子组件不可用。我在这里错过了什么？

归根结底，重构我当前代码以替换 'inherit: true' 并且仍然可以访问根实例数据和函数的最佳方法（标准和实践）是什么？欢迎任何关于此的 help/advice。提前致谢。

Answer 1

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

v-bind:authorized="authorized"

或shorthand

:authorized="authorized"

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

Answer 2

查看此页面上@StephenHallgren 的回答，了解在 HTML 中访问道具的正确方法。

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

他对上述问题的回答是：

If you are fairly certain about the structure, you can use $root.authorized.

Alternatively, don't put the authorized state in the root at all. Have a dedicated module for user state that can be imported in any component. See http://rc.vuejs.org/guide/application.html#State_Management

我的收获是 - 如果有具体的全局变量不会改变，并且应用程序结构合理，则可以使用 $root （或 $parent 视情况而定），以及 - 如果元素的状态有时会发生变化（例如用户是否在 authorized/logged 中），则关键就是使用状态管理模块。

同时，在父子之间传递道具时，必须在道具数组中声明道具，然后将它们绑定到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>

（或shorthand）

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

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

Vue JS rc-1 Passing Data Through Props Not Working

vue.js