Vue.js开发中面向对象开发总结

最新推荐文章于 2024-06-03 09:46:11 发布

清雨未尽时

最新推荐文章于 2024-06-03 09:46:11 发布

阅读量887

点赞数

分类专栏：使用实例 vue 文章标签：前端

本文链接：https://blog.csdn.net/kangguang/article/details/129448058

版权

使用实例同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

文章讲述了在Vue.js开发中如何通过组件继承实现添加和编辑功能的共用布局，但这种方式可能导致编辑组件无法添加额外控件。为解决这个问题，文中提出了使用Vue的插槽功能，允许子组件自定义部分区域，从而在保持父组件结构的同时，实现差异化布局。通过插槽，组件B可以对组件A的部分进行覆写，实现了更灵活的页面构建和数据传递。

摘要由CSDN通过智能技术生成

在Vue.js开发中，组件编写时添加和编辑功能页面布局一直，区别在于编辑时需要数据还原填充。

在面向对象思想里只需要编辑组件继承添加组件即可，那么Vue中怎么操作呢。

添加页面

<template>
  <el-dialog
    :title="titleType"
    :visible.sync="dialog"
    center
    :close-on-click-modal="false"
    :before-close="handleClose"
    :destroy-on-close="true"
    @close="vueclosed"
    @open="openvue"
    width="60%"
  >
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="职位标题" prop="jobTitle">
            <el-input v-model="ruleForm.jobTitle"
                      placeholder="请填写客户名称"
                      clearable
            >
            </el-input>
          </el-form-item>
    </el-form>
</el-dialog>
</template>
export default {
  name: 'LLAddJob'
}

编辑页面

<script>
import LLAddJob from './LLAddJob'
export default {
  name: 'LLEditJob',
  extends: LLAddJob
}
</script>

用 extends 继承即可

但是这样有一个缺陷，就是编辑组件不能在页面上添加任何控件，否则会对父组件进行重写覆盖，

如果子组件的压面控件多余或者有不同于父组件的地方，怎么办呢？只能在父组件中添加数据字段，在页面显示的时候加以判断，进行不同的布局显示。这样做显然是不合理的，那要怎么做呢？

对，用到了Vue.的插槽功能。具体如下：

组件A

<template>
  <el-dialog
    :title="titleType"
    :visible.sync="dialog"
    center
    :close-on-click-modal="false"
    :before-close="handleClose"
    :destroy-on-close="true"
    @close="vueclosed"
    @open="openvue"
    width="40%"
  >
    <el-row :gutter="0" >
      <el-col :span="24">
        <el-descriptions  :column="2">
          <el-descriptions-item  label="客户名称" label-class-name='my-label'> 
             {{ruleForm.customerName}}
          </el-descriptions-item>
      </el-col>
      <el-col>
        <slot name="footer">
          <div style="float:right;">
            <!--        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
            <el-button @click="handleClose">取消</el-button>
          </div>
        </slot>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'CustomerDetail',
  props: {
    dialog: Boolean,
    acountData: {}
  },
  data () {
  }
}

组件B

<template>
   <CustomerDetail ref="customerDetail"
                   :dialog="dialog"
                   :acount-data="customerData"
                   @close="callback">
     <template v-slot:footer>
       <div style="float:right;">
         <!--        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
         <el-button @click="callback">取消</el-button>
         <el-button @click="adoptHandleClick" type="success">通过</el-button>
         <el-button @click="refuseHandleClick" type="danger">拒绝</el-button>
       </div>
     </template>
   </CustomerDetail>
</template>

<script>
import CustomerDetail from './CustomerDetail'
export default {
  name: 'AuditCustomer',
  props: {
    dialog: Boolean,
    customerData: {},
    callback: Function
  },
  components: {
    CustomerDetail
  }

}
</script>

这样组件B就可以根据的需要对组件A页面进行部分覆写。

各组件的数据传递 view-组件B-组件A

  页面添加组件A
  <AuditCustomer ref="customerAuditDetail"
                 :dialog="isShowAudit"
                 :customer-data="currentEditCustomerData"
                 :callback="auditCloseCallBack"
                 @refuse="auditrefuseCallBack"
                 @adopt="auditAdoptCallBack"
  >
  </AuditCustomer>

  组件B-组件A
<CustomerDetail ref="customerDetail"
                   :dialog="dialog"
                   :acount-data="customerData"
                   @close="callback">
  </CustomerDetail>