今天遇到一个很离奇的bug，记录一下

问题：在组件内底部栏使用$emit触发按钮事件但打印出来的值是初始化的值，更新的值被重置导致更新失败
原因：组件内底部使用了 position: fixed; 固定， 导致组件内插槽 this 与 保存按钮的this 不一致
解决： 取消position: fixed; 改用 position: absolute;

组件 editDetail

<div class="container">
  <div >
    ...
    <div class="footer">
       <el-button class="btn" size="mini" @click="submit">保存</el-button>
    </div>
  </div>
</div>

// 保存
submit() {
    
      
  this.$emit('submit')
},

.footer{
    
      
  // position: fixed;
  position: absolute;
  bottom: 0;
  min-height: 55px;
  background: #FFFFFF;
  z-index: 999;
  ...
}

页面 edit.vue

<editDetail  @submit="handleSubmit">
    <template slot="scope">
    	<el-form ref="form" :model="form" :rules="rules" :label-width="80px">
    	 	<el-form-item label="xxx" prop="xxx">
               ...
            </el-form-item>
            ...
		</el-form>            
    </template>
</editDetail>

 handleSubmit() {
    
      
 	console.log('form', this.form)
 }