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 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JS如何监听div的resize事件详解
Dec 03 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抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
房屋租赁协议书
2014/04/10 职场文书
村级换届选举方案
2014/05/10 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
安全生产标语口号
2015/12/26 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
python 详解turtle画爱心代码
2022/02/15 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers