Vue JS rc-1 通过道具传递数据不起作用
Posted
技术标签:
【中文标题】Vue JS rc-1 通过道具传递数据不起作用【英文标题】：Vue JS rc-1 Passing Data Through Props Not Working 【发布时间】：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”并且仍然可以访问根实例数据和函数的最佳方式（标准和实践）是什么？对此的任何帮助/建议都将受到欢迎。提前致谢。
【问题讨论】：
【参考方案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 论坛。感谢您的帮助。以上是关于Vue JS rc-1 通过道具传递数据不起作用的主要内容，如果未能解决你的问题，请参考以下文章