您的位置：首页 > 产品设计 > UI/UE

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

2017-07-27 17:14 716 查看
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(){
                    this.count += 1;
                }
            }
        });
        new Vue({
            el : "#app"
        });
</script>
注：开发过程中遇到了一个vue.js中style绑定的问题。

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

<button type="button" name="button" @click="plus" style="background: {{bgcolor}}">赞赞赞{{ count }}</button>


vue提示的报错信息为：

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example,instead of <div style="{{ val }}">,use <div :style="val">

改为以下写法：

<button type="button" name="button" @click="plus" v-bind:style="background: {{bgcolor}}">赞赞赞{{ count }}</button>
依然报错。

正确写法为：

<button type="button" name="button" @click="plus" v-bind:style="{background: bgcolor,fontSize: fontsize + 'px',color: '#fff',border: 'none'}">赞赞赞{{ count }}</button>
子组件又是如何触发父组件的呢？

html代码如下：

<div id="app">
<p>{{ total }}</p>
<seccounter v-on:plustotal="totalplus"></seccounter>
<seccounter v-on:plustotal="totalplus"></seccounter>
</div>
js代码如下：

<script src="vue.js" type="text/javascript"></script>
<script>
Vue.component("seccounter",{
            template : '<button v-on:click="secplus">{{ seccounternum }}</button>',
            data : function(){
                return { seccounternum : 0 };
            },
            methods : {
                secplus : function(){
                    this.seccounternum += 1;
                    this.$emit('plustotal');  //使用emit触发事件
                },
            }
        });
new Vue({
            el : "#app",
data :{
                total : 0
            },
            methods : {
                totalplus : function(){
                    this.total += 1;
                }
}
        });
</script>
大致流程如下：

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js组件</title>
</head>
<body>
<p>父元素给子元素传值</p>
<div id="app">
<counter heading="完美极了" bgcolor="green" fontsize="16"></counter>
<counter heading="糟糕透了" bgcolor="red" fontsize="16"></counter>
<hr />
<p>子元素向父元素通信</p>
<p>{{ total }}</p>
<seccounter v-on:plustotal="totalplus"></seccounter>  //3.使用组件
<seccounter v-on:plustotal="totalplus"></seccounter>
</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>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = Vue.extend({    //1.创建组件
template:"#mycounter",
data:function(){
return { count : 0};
},
props:["heading","bgcolor","fontsize"],
methods : {
plus : function(){
this.count += 1;
}
}
});

var seccounter = Vue.extend({   //1.创建组件
template : '<button v-on:click="secplus">{{ seccounternum }}</button>',
data : function(){
return { seccounternum : 0 };
},
methods : {
secplus : function(){
this.seccounternum += 1;
this.$emit('plustotal');
},

}
});

new Vue({
el : "#app",
components : {          //2.注册组件
'counter' : counter,
'seccounter' : seccounter
},
data :{
total : 0
},
methods : {
totalplus : function(){
this.total += 1;
}
}
});
</script>
</body>
</html>
说明：

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

    2.注册组件；

    3.使用组件。

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

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


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                Vue
                                                前端开发
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航