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

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

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

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

html代码如下：

    

          //这里的heading,bgcolor,fontsize是要传给子组件的数据
        
    
    

js代码如下：

注：开发过程中遇到了一个vue.js中style绑定的问题。

开始，我引入style的方式为：

赞赞赞{{ count }}

vue提示的报错信息为：

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example,instead of

,use

改为以下写法：

赞赞赞{{ count }}

依然报错。

正确写法为：

赞赞赞{{ count }}

子组件又是如何触发父组件的呢？

html代码如下：

    
{{ total }}
    
    

js代码如下：

大致流程如下：

    1.定义组件及其中的template模板；

    2.当点击button时，会触发组件中的secplus函数；

    3.通过emit方法触发父组件中的plustotal监听事件；

    4.plustotal触发全局的totalplus函数。

如何在一个页面中同时定义多个组件呢？

使用Vu.extend方法，代码如下：

    
        
        
    
    
        
父元素给子元素传值
        

            
            
            

            
子元素向父元素通信
            
{{ total }}
              //3.使用组件
            
        

        
        
        
    

说明：

    1.创建组件：使用Vue.extend创建两个组件，并分别保存在counter和seccounter两个对象中；

    2.注册组件；

    3.使用组件。

也可以使用Vue.component直接注册：

Vue.component({'counter' : counter,'seccounter': seccounter});