Vue.js组件—父组件与子组件之间的数据联系

Vue.js中的组件可以理解为自己定义的标签；而组件化的目的则可以理解为方便代码复用。

父组件和子组件之间是如何进行数据联系的呢？

父组件向子组件传递数据：

html代码如下：

    <div id="app">
        <counter heading="完美极了" bgcolor="green" fontsize="16"></counter>  //这里的heading,bgcolor,fontsize是要传给子组件的数据
        <counter heading="糟糕透了" bgcolor="red" fontsize="16"></counter>
    </div>
    <template id="mycounter">
        <div class="">
            <h1>{
  { heading }}</h1>
            <button type="button" name="button" @click="plus" v-bind:style="{background: bgcolor,fontSize: fontsize + 'px',color: '#fff',border: 'none'}">赞赞赞{
  { count }}</button>
        </div>
    </template>

js代码如下：

    
    <script src="vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        Vue.component("counter",{
            template:"#mycounter",
            data:function(){
                return { count : 0};  //组件中的data必须是一个函数
            },
            props:["heading","bgcolor","fontsize"],  //使用props声明从父组件传过来的数据后，子组件才可以使用
            methods : {
                plus : function(){