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