子组件点击事件如何触发父组件的事件并传值

Question

点击立即创建触发vue页面的事件，获取子组件form的值

子组件

<template>
  <div class="BannerForm">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type" />
          <el-checkbox label="地推活动" name="type" />
          <el-checkbox label="线下主题活动" name="type" />
          <el-checkbox label="单纯品牌曝光" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助" />
          <el-radio label="线下场地免费" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'BannerForm',
  data() {
    return {
      msg: '',
      form: {
        name: '',
        img64: '',
        link: '',
        number: '',
        state: ''
      }
    }
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      return (this.form)
    }
  }
}
</script>

<style scoped>

</style>

注册组件

```javascript
import Vue from 'vue'
import BannerForm from './form'
Vue.component(BannerForm.name, BannerForm)

vue页面调用子组件
```javascript
<template>
  <div class="app-container">
    <!-- 遮罩层 -->
    <transition name="transition">
      <div v-if="mask == true" class="mask" />
    </transition>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="顶部轮播图" name="first">
        <!-- 轮播图添加按钮，点击弹出表单 -->
        <el-button type="primary" @click="changemask">添加轮播图</el-button>
        <transition name="transition">
          <!-- 轮播图添加表单 -->
          <div v-if="mask == true" class="formbox" @click="ResetMask">
            <div class="form" @click="StopResetMask">
              <banner-form @ref="BannerForm" @click="getForm">此处调用组件</banner-form>
            </div>
          </div></transition>

        <!-- 中部显示轮播图信息 -->
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="number"
            label="排序"
            width="100"
          />
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="address"
            label="链接地址"
            width="180"
          />
          <el-table-column
            prop="image"
            label="图片"
            width="400"
          />
          <el-table-column
            prop="lasttime"
            label="最后操作时间"
            width="180"
          />
          <el-table-column
            prop="state"
            label="状态"
            width="180"
          />
          <el-table-column
            prop="edit"
            label="操作"
            width="180"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="底部导航" name="second">底部导航</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      activeName: 'first',
      msg: '',
      mask: false, // 遮罩层
      // form表单数据
      form: {
        name: '',
        img64: '',
        link: '',
        number: '',
        state: ''
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      console.log(process.env.VUE_APP_BASE_API)
    },
    changemask() {
      console.log(this)
      this.mask = true
      console.log(this.mask)
    },
    ResetMask() {
      this.mask = false
    },
    StopResetMask(e) {
      e.stopPropagation()
    },
    getForm() {
      console.log(this.$refs.BannerForm.onSubmit)
    }
  }
}
</script>

<style scoped>
/* 缩放动画 */
.transition-enter, .transition-leave-to {
  transform: scale(0)
}
.transition-leave, .transition-enter-to {
  transform: scale(1)
}
.transition-enter-active, .transition-leave-active {
  transition: all 0.2s
}
.mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.103);
}
.formbox{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form{
  width: 600px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 100px;
  padding-right: 40px;
  border: 1px solid #000;
}
.bitian{
  color: red;
  display: inline-block;
}
</style>

Answer 1

  //子组件点击事件
    onSubmit() {
       this.$emit('fatherFun',this.form)
      return (this.form)
    }

//父组件
<banner-form @ref="BannerForm" @click="getForm" @fatherFun="fatherFun">此处调用组件</banner-form>
methods:{
      fatherFun(data){
        this.msg = data
        console.log(this.msg) //this.msg是子组件的数据
      }
  }