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(){
                    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.js组件—父组件与子组件之间的数据联系

猜你喜欢