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

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

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

为什么要写很多不同的组件?不能写一个通用的组件,然后在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. 在IIS7上导出所有应用程序池的方法 批量域名绑定

    在IIS7+上导出所有应用程序池的方法:%windir%/system32/inetsrv/appcmd list apppool /config /xml > c:/apppools.xml  ...

  2. February 3 2017 Week 5 Friday

    Laughter is an instant vacation. 笑一笑,身心轻松宛如度了个短假. Always present a smile on your face, even there's ...

  3. ZT 骆家辉宣布辞职 他给中国带来什么留下什么?

    骆家辉宣布辞职 他给中国带来什么留下什么? 字号|2013年11月20日 15:20    已有1933人阅读    57 导 读 美国驻华大使骆家辉20日上午发表声明,宣布辞职.骆家辉履任期间为中国 ...

  4. ZT北大青鸟营业额超20亿到不值一提 衰落的背后

    北大青鸟营业额超20亿到不值一提 衰落的背后 2013-10-18 08:18 王根旺  我要评论 (0) “北大青鸟是个悲剧!”说到曾经的IT培训业巨头,黑马导师.珍品网创始人曹允东惋惜道.在学大创 ...

  5. webpack学习(五)配置详解

    配置详解 //使用插件html-webpack-plugin打包合并html //使用插件extract-text-webpack-plugin打包独立的css //使用UglifyJsPlugin压 ...

  6. 学习WebSocket一(WebSocket初识)

    Java EE 7 去年刚刚发布了JSR356规范,使得WebSocket的Java API得到了统一,Tomcat从7.0.47开始支持JSR356,这样一来写WebSocket的时候,所用的代码都 ...

  7. 百度地图Label 样式 setStyle

    最近一直在整百度地图,发现一个小问题: 创建文本标注对象设置样式的时候,其中的backgroundColor属性居然还支持透明啊,不过改变数值好像对效果没有影响 var numLabel = new ...

  8. php 统计二维数组中某个相等值的总个数,并且组合成一个新的数组 转发

    $ar = array(   array( 'sv_id' => 1, 'mid' => 1, 'sv_question1' => 20 ),   array( 'sv_id' =& ...

  9. centos 在安装YouCompleteMe时提示 Fatal : pyconfig.h No such file or directory

    问题:centos 在安装YouCompleteMe时提示 Fatal : pyconfig.h No such file or directory 解决:安装python-devel yum ins ...

  10. 二叉树前序、中序、后序非递归遍历 144. Binary Tree Preorder Traversal 、 94. Binary Tree Inorder Traversal 、145. Binary Tree Postorder Traversal 、173. Binary Search Tree Iterator

    144. Binary Tree Preorder Traversal 前序的非递归遍历:用堆来实现 如果把这个代码改成先向堆存储左节点再存储右节点,就变成了每一行从右向左打印 如果用队列替代堆,并且 ...