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>'

})