Vue的子组件向父组件传递参数,提供了$emit方法
$emit有两个参数,$emit(‘事件名’,传递的参数),两个参数后续说明,上代码;
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>v-model</title><script src="vue.js"></script><link rel="icon" href="01_飞机.png" ></head><body><div id='model' :style="{ fontSize: postFontSize + 'em'}"><count-time @getcount='changeSize'></count-time></div><script>ponent('count-time',{data: function(){//组件中的data必须是一个函数return {count: 20}},template: "<button @click='handleClick'>点击扩大</button>",methods:{handleClick:function(){this.$emit('getcount',this.count);}}})var model = new Vue({el: '#model',data:{postFontSize:0},methods:{changeSize:function(index){//这里的index获取的是count的值this.postFontSize += index}}})</script></body></html>
实现了属性fontsize的扩大,这里只是为了说明$emit的用法,不是为了实现功能
点击button后,button下移动,说明fontsize的扩大了
代码说明
$emit('getcount',this.count);这里getcount是事件名,而this.count是要传递给父组件的参数。
template模板中的@click点击绑定的是handleClick,点击后就会调用自定义的handleClick函数,$emit('getcount',this.count)就会执行,但是此时count并没有传递给父组件。
然后需要在dom中利用$emit创建的getcount事件,并绑定父组件自定义的changeSize函数,这时count才传递给父组件。
父组件的函数参数index此时接收了子组件的count参数,index = count = 20