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


Posted in Javascript onSeptember 04, 2020

一、 ??录妇?/strong>

在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式:

1. 大容量单组件开发,渲染和传入的数据使用各种type、ctype判断

2. 使用插槽开发,根据type调用对应的组件

3. 使用component加载组件的方式,动态渲染调用组件

最终选择:第三种方式,采用<component>标签动态引入的方式开发

二、 官方文档解释

1. https://cn.vuejs.org/v2/guide/components.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">
      //...
    </div>
 
    <!-- 搜索表单框 -->
    <div class="filter-line">
      //...
    </div>
 
  </div>
</template>
 
<script scoped>
  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
    }
  } 
</script>
 
<style scoped lang="stylus">
  @import './stylus/filter-input.styl'
</style>

2. 单个功能组件剥离成单独的组件文件

(1)搜索:fi-search.vue

(2)下拉: fi-select.vue

(3)标签:fi-tab.vue

(4)时间:fi-time.vue

然后在每个单独的组件内设置默认的props值,通过这个值来动态渲染组件和绑定数据,根据组件类别绑定click或者change事件

3. 选择一个下拉功能文件源码示例分析

<template>
  <div class="filter-line">
    <section class="filter-line-title">{{title}}</section>
    <section class="filter-line-content">
 
       <span class="flc-span-wrap">
        
        <!-- 下拉框选项卡 -->
        <el-select v-model="contents.value" placeholder="请选择" :class="'selectBox'">
          <el-option
            v-for = "v,i in contents.options"
            :key = "i"
            :label = "v.label"
            :value = "v.value">
          </el-option>
        </el-select>
      </span>
 
    </section>
  </div>
</template>
 
<script scoped>
 
  import { Select, Option } from 'element-ui';
 
  export default {
    name: 'fi-select',
    data(){
      return {
        selectValue: ''
      }
    },
    props:{
      title:{
        type: String,
        default: '信息类别'
      },
      contents:{
        type: Object,
        default:() => ({
          options: [
            { label: 'show option 1', value: 1 },
            { label: 'show option 2', value: 2 },
            { label: 'show option 3', value: 3 },
            { label: 'show option 4', value: 4 }
          ],
          value: ''
        })
      }
    },
    methods:{
 
    },
    components:{
      'el-select': Select,
      'el-option': Option
    }
  }
</script>

4. 调用下拉框示例

<component v-bind:is="FiSelect" :title="'任务类别'"></component>

四、 数据渲染和管理的逻辑

我们将通过数据渲染及绑定所有组件内容,所以数据的结构如下:

export const listFilters = [{
  title: '工作状态',
  type: 'tab',
  emit: '',
  contents: [
    {name:'all',text: '全部'},
    {name:'not-issued', text: '未完成'},
    {name: 'is-issued',text:'已完成'},
    {name: 'is-ended',text: '已结束'}
  ]
},{
  title: '工作时间',
  type: 'time',
  emit: '',
  contents: [
    { type:'tab',name:'all',text: '全部' },
    { type:'tab',name:'today', text: '今天' },
    { type:'tab',name: 'week',text:'一周内' },
    { type:'tab',name: 'week',text:'这个月' },
    { type:'custom',name:'custom',sv:'',ev:'' }
  ]
},{
  title: '来源类别',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '类型 1', value: 1 },
      { label: '类型 2', value: 2 },
      { label: '类型 3', value: 3 },
      { label: '类型 4', value: 4 }
    ],
    value: ''
  }
},{
  title: '网站名称',
  type: 'select',
  emit: '',
  contents: {
    options: [
      { label: '腾讯网', value: 1 },
      { label: '新浪网', value: 2 },
      { label: '网易网', value: 3 },
      { label: '凤凰网', value: 4 },
      { label: '搜狐网', value: 5 }
    ],
    value: ''
  }
},{
  title: '工作搜索',
  type: 'search',
  contents: {
    inputValue: ''
  }
}];

五、组件遍历调用渲染

<template>
  <div class="filter-input-container">
    <!-- 最终可以动态调用所有组件 -->
    <component v-bind:is="'fi-'+v.type" :title="v.title" :contents="v.contents" v-for="v,i in listFilters" :key="i"></component>
  </div>
</template>
 
<script scoped>
 
  import {listFilters} from './scripts/filters.data.js';
 
  export default {
    data(){
      return {
        components:['fi-tab','fi-time','fi-select','fi-search','fi-input'],
        listFilters: listFilters
      }
    },
    props:{
      
    },
    methods:{
      
    },
    components:{
      'fi-search': () => import('../components/fi-search.vue'), //搜索表单
      'fi-tab': () => import('../components/fi-tab.vue'), // tab切换
      'fi-time': () => import('../components/fi-time.vue'), // 时间选择
      'fi-select': () => import('../components/fi-select.vue') // 选择下拉框
    }
  } 
</script>
 
<style scoped lang="stylus">
  @import './stylus/filter-input.styl'
</style>

六、 最终案例预览效果

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

补充知识:vue中component组件使用——模块化开发和全局组件

1、模块化开发组件:

box1.vue文件如下:

<template>
 <div class="hello">
  <h1>测试</h1>
 </div>
</template>
 
<script>
export default {
 
}
</script>

box2.vue文件如下:import引入box1.vue,components设置,然后设置成标签使用<box1><template>

<div>
  <box1></box1>
 </div>
</template>
 
<script>
import box1 from '@/components/box1'
export default {
 components: {'box1': box1},
}
</script>

2、全局组建

<div id="example">
 <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
 template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
 el: '#example'
})

渲染为:

<div id="example">
 <div>A custom component!</div>
</div>

以上这篇Vue中component标签解决项目组件化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
jquery中键盘事件小结
Feb 24 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
常用的js方法合集
Mar 10 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
JS数组转字符串实现方法解析
Sep 04 #Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 #Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
js实现放大镜特效
2017/05/18 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
LayUI表格批量删除方法
2018/08/15 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python笔记:mysql、redis操作方法
2017/06/28 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python实现简单http服务器功能
2018/09/17 Python
python操作文件的参数整理
2019/06/11 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python 实现字符串下标的输出功能
2020/02/13 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书