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

来源：互联网发布：万网域名cname怎么设置编辑：程序博客网时间：2024/06/05 20:22

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});

阅读全文

0 0