在项目中,经常会有需求让我们把很多通用性的功能写成一个模板,然后根据不同的应用场景传入不同的参数来完成某种功能

但是在很多时候,其实并不是一个模板就能完成所有的功能的

这就需要分类写组件了,但是需求方又希望你能写一个万金油的组件,他就有疑惑了:

为什么要写很多不同的组件?不能写一个通用的组件,然后在slot里面写自己想要的内容?
以我目前的看法是这样认为的
这个组件的分界概念并没有很明确
组件只是说让你把很多重复性的代码,抽取出来,精简代码,降低冗余性,
而至于抽取多少出来,精简到什么程度,就仁者见仁智者见智,看你自己怎么定义了。

因为如果你写了一个太通用的组件,通过slot把微调的代码写进入,
而既然是微调,那么插槽里面的代码肯定就不多,
因为如果你每次调用组件,还要去写一大段slot,而当这个组件在很多的地方使用时,
这些插槽里面的代码,本身就是重复性的,
这时又需要把这些代码抽离,写成新组件

所以,不能奢望一招鲜吃遍天下,应该对于不同的应用场景设计不同的大致通用的模板

不能说组件写的多,说明你的能力不行。

关于Vue的组件的通用性问题的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  9. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

随机推荐

  1. HTML 5篇(持续更新)

    1.sessionStorage .localStorage 和 cookie 之间的区别 (一)共同点:都是保存在浏览器端,且同源的. (二)区别:cookie数据始终在同源的http请求中携带(即 ...

  2. ajax post data 获取不到数据,注意content-type的设置post/get

    因为之前一直用jQuery ajax get的方式传递参数, 默认没有设置过 contentType 的值. $.ajax({ url: "/yuanjin/jianxiang", ...

  3. Mysql 优化配置2

    服务器物理硬件的优化 来源社区,个人作为收集 在挑选硬件服务器时,我们应该从下面几个方面着重对MySQL服务器的硬件配置进行优化,也就是说将项目中的资金着重投入到如下几处: 1.磁盘寻道能力(磁盘I/ ...

  4. ubuntu 安装nodejs和git

    1.安装curl sudo apt-get install curl 2.安装nodejs 和 npm curl -sL https://deb.nodesource.com/setup_8.x | ...

  5. Oracle使用超大SQL脚本文件恢复数据问题记录

    在以前获取的Oracle数据库备份一般都是dmp文件,创建表空间和用户就直接使用imp或者impdp导入即可. 这一次遇到的情况比较特殊,对方提供数据时给我的是使用SQLPlus导出的SQL脚本文件, ...

  6. 【Leetcode】【Medium】Reorder List

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  7. ldconfig: /usr/lib/libpython2.6.so.1.0-gdb.py is not an ELF file - it has the wrong magic bytes at the start.

    https://bugzilla.redhat.com/show_bug.cgi?id=562980

  8. python全栈学习笔记(一)网络基础之网络协议篇

    阅读目录 一.操作系统基础 二.网络通信原理 2.1 互联网的本质就是一系列的网络协议 2.2 osi七层协议 2.3 tcp/ip五层模型讲解 2.3.1 物理层 2.3.2 数据链路层 2.3.3 ...

  9. 《C++ Primer Plus》读书笔记之——处理数据

    本文旨在记录在阅读<C++ Primer Plus>第五版的过程中,一些重点的知识点,方便以后查阅.本文将不断更新...... 一.第三章 处理数据 1.无符号整型不能存储负数值,其优点是 ...

  10. Ubuntu中的两种link的区别

    Ubuntu中有两种link(windows世界中文件的“快捷方式”),一个是hard link(硬链接),另一个是symbolic link(软链接). 那么,什么是硬链接,什么又是软链接呢? 硬链 ...