Vue中component标签解决项目组件化操作

Vue中中component标签解决项目组件化操作标签解决项目组件化操作

主要介绍了Vue中component标签解决项目组件化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随

小编过来看看吧

一、一、 啰嗦几句啰嗦几句

在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在

这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是体积还是比较庞大，最近

有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数据渲染，统一组件管理，且这些功能无论是样

式，或者是从结构来说，差异性都很大，所以考虑了以下几种开发方式：

2. https://cn.vuejs.org/v2/guide/components-dynamic-async.html

3. https://jsfiddle.net/chrisvfritz/o3nycadu/

三、三、 开发步骤开发步骤

1. 首先按照大组件模式开发，功能拆分，统一在大组件中实现所有功能模块的样式 ( 注意：需要在在局部样式覆盖全局样式的

条件需要在样式中使用 /deep/ 、 >>> )

<template>

<div class="filter-input-container">

<!-- 选项卡 -->

<div class="filter-line">

</div>

<!-- 信息列别下拉框 -->

<div class="filter-line">

//...

</div>

<!-- 搜索表单框 -->

<div class="filter-line">

//...

import { DatePicker, Select, Option, Button, Input } from 'element-ui';

export default {

components:{

'el-date-picker': DatePicker,

'el-select': Select,

'el-option': Option,

'el-button': Button,

'el-input': Input

}

}