Vue子组件向父组件传值

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>