vue之子父组件通信

一. 子-父组件间通信:

    let children = {    # 定义子组件

        template: `<div>

                    <button @click="send">点击变大小</button>

                 </div>`,

        methods:{

            send:function () { this.$emit('change',0.1) }  # 括号内参数为传递给父组件哪个

                }  };  # 接上,事件,后面是参数.

 

    let parent = {

        components: {'children':children},

        template:`<div>

                    <span :style="{fontSize:size+'em'}">XXXXX</span>

                    <children v-on:change="res"></children>  # 自定义的事件,监听子类的emit

                  </div>` ,

        data(){ return {size:1} },

        methods:{ res : function (value) {

                this.size += value;

            }}

    };

 

    new Vue({

        el:'#app',

        components:{parent,},

        template: '<parent></parent>'

        })