广东省工程建设注册中心网站网站建设维护杭州

今天遇到一个很离奇的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)}