Vue.js的组件（二）父组件与子组件的数据联系 之 父传子

假设有如下组件：

/*js*/
Vue.component('my-button',{
tempalte:'<button>一个按钮</button>'
})
var app3 = new Vue({
el:'#app3',
data:{
message:0
}
})
/*html*/
<div id="app3">
<mybutton></mybutton>
</div>

父组件和子组件是相对于作用域而言的。因为他们都是Vue()的实例，有各自独立的作用域。

先理清谁是父谁是子。

<div id="app3"></div> //父

<button>一个按钮</button> //子

首先，父可以传数据给子。

也就是app3的数据给

button

。

怎么传？

通过组件的一个属性props.

现在对上面的组件加上这个属性，变成了下面这样。

/*js*/
Vue.component('my-button',{
props:['deliver'],
tempalte:'<button>{{deliver}}</button>'
})
var app3 = new Vue({
el:'#app3',
data:{
message:'把我传给子组件'
}
})

//html
<div id="app3">
<my-button v-bind:deliver="message"></my-button>
</div>

这样就成功的将父的数据传给子了。

要注意的是，porps里不能有

-

，不能有驼峰。

父传给子的这个message是单向绑定的，app3.message如果改变了，那子模板也会改变。

如果子模板想要加工从porps中得到的数据从而变成自己想要的数据，可以使用 computed属性，这时候，组件就改成了这样：

Vue.component('my-button',{
props:['deliver'],
tempalte:'<button>{{counter}}</button>'
computed:{
counter:function(){
return this.deliver+'hello world'
}
}
})

现在，你的数据被加工成，message+’hello world’了，而且会根据message的变化而变化。