Vue组件传值之——子组件向父组件传值——
子组件传父组件:主要通过this.$emit(event,message)
$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数message传递给父组件,父组件通过@event监听并接收参数。
例子:
两步走:因为是子传父,数据在子组件中
1、子组件是一个button按钮,并为其添加了一个click事件,当点击的时候,子组件通过this.$emit(handleDialog,message)将参数message传给父组件
2、父组件在子组件的标签里,定义了一个自定义事件buttonEvent,通过@buttonEvent,来触发自己的方法showDialog,在方法里接收子组件带过来的参数
父组件中:
<template>
<div>
<Child>@buttonEvent="showDialog"></Child>
<div>{{messageInfo}}</div>
</div>
</template>
<script>
export default {
data(){
return{
showDialogMessage:''
}
},
methods(){
showDialog(messageInfo){
this.showDialogMessage=messageInfo;
}
}
</script>
子组件中:
<template>
<button @click="handleDialog">
点击
</button>
</template>
<script>
export default {
data(){
return{
message:"哈哈哈"
}
},
methods(){
handleDialog(){
this.$emit( 'buttonEvent' , ' this.message ')
}
}
</script>