如何封装组件???
今天继续给大家分享一个我自己新学习的知识哦。就是如何封装组件了。
如果这一部分或者项目中这一个页面多个地方会使用到这个页面,就可以将这个部分封装成一个组件。
<el-button v-if="isReadOnly" size="small" @click="handleClose" style="display: block;margin: 0 auto">关闭</el-button>
<el-button v-else type="primary" size="small" @click="handleReserve" :loading="submitLoading" style="display: block;margin: 0 auto">保存</el-button>
上面是封装组价中的两个按钮
这里是封装组件中的定义了几个方法我写了注释的哦,之后在使用到这个组件的时候,哪里需要用到这个就可以直接定义这几个方法。
以上是实现这几个方法的逻辑,直接在需要的地方调用这个组件即可,切记引入组件
import GiveForm from "@/views/workorder/form/giveForm";
components: {GiveForm},
父组件可以使用 props 把数据传给子组件。
子组件可以使用this.$emit('submit', submitData)
触发父组件的自定义事件。
这里是submit,在父组件中使用就是@submit,将submitData传递给父组件
封装的组件是子组件,使用的页面是父组件
例如:这个页面中我需要使用到这个组件
<give-form :submit-loading.sync="submitLoading" @submit="handleReserve"></give-form>
就可以使用,如果有些部分跟组件不一样,可以重新定义一下方法。