Vue--子组件向父组件传值

子组件向父组件传值,主要是通过this.$emit('函数名fun',所传数据datas)将值在子组件标签绑定事件 @函数名fun='父组件中的方法father',然后在父组件中定义方法 

father(val){

val就是要传的数据datas

},

这样就可将之传递到父组件中可以进行使用

<body>

<div id="app">

<list-btn @demo='getDatas'></list-btn>

<p>{{msg}}</p>

</div>

</body>

<script type="text/javascript">

Vue.component('list-btn',{

data:function(){

return {

count:0

}

},

template:`

<div>

<button @click='hander'>点击</button>

</div>

`,

methods:{

hander:function(){

this.$emit('demo',this.count);

}

}

})

let app=new Vue({

el:'#app',

data:{

msg:'我是father'

},

methods:{

getDatas:function(val){

this.msg+=val;

}

}

})

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容