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的变化而变化。