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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
js内置对象 学习笔记
Aug 01 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jquery密码强度校验
2015/12/02 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python类继承用法实例分析
2015/05/27 Python
使用python加密自己的密码
2015/08/04 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
使用TensorFlow实现SVM
2018/09/06 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python搜索包的路径的实现方法
2019/07/19 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
小学少先队活动方案
2014/02/18 职场文书
百日安全活动总结
2014/05/04 职场文书
大学生工作求职信
2014/06/23 职场文书
工作时间调整通知
2015/04/24 职场文书
筑梦中国心得体会
2016/01/18 职场文书
《灰雀》教学反思
2016/02/19 职场文书
社区结对共建协议书
2016/03/23 职场文书
golang生成并解析JSON
2022/04/14 Golang