props

2017-09-19  本文已影响0人  猿分让我们相遇

动态 Props
在模板中,要动态地绑定父组件的数据到子模板的 props,与绑定到任何普通的 HTML 特性相类似,就是用 v-bind。每当父组件的数据变化时,该变化也会传导给子组件:

//HTML
<div id="app">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>   //如果把my-message看做是自定义元素child的属性就好理解了
Vue.component("child",{
props:["myMessage"],
templent:"<div>{{myMessage}}</div>"
})
new Vue({
el:"#app",
data:{parentMsg:"这是父组件的数据"}
})

用一个对象作为 props 传递所有的属性,你可以使用不带任何参数的 v-bind (即用 v-bind 替换掉 v-bind:prop-name)。例如,已知一个 todo 对象:
todo: {
text: 'Learn Vue',
isComplete: false
}
然后:
<todo-item v-bind="todo"></todo-item>


prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

上一篇 下一篇

猜你喜欢

热点阅读