关于Vue的组件的通用性问题
在项目中,经常会有需求让我们把很多通用性的功能写成一个模板,然后根据不同的应用场景传入不同的参数来完成某种功能
但是在很多时候,其实并不是一个模板就能完成所有的功能的
这就需要分类写组件了,但是需求方又希望你能写一个万金油的组件,他就有疑惑了:
为什么要写很多不同的组件?不能写一个通用的组件,然后在slot里面写自己想要的内容?
以我目前的看法是这样认为的
这个组件的分界概念并没有很明确
组件只是说让你把很多重复性的代码,抽取出来,精简代码,降低冗余性,
而至于抽取多少出来,精简到什么程度,就仁者见仁智者见智,看你自己怎么定义了。
因为如果你写了一个太通用的组件,通过slot把微调的代码写进入,
而既然是微调,那么插槽里面的代码肯定就不多,
因为如果你每次调用组件,还要去写一大段slot,而当这个组件在很多的地方使用时,
这些插槽里面的代码,本身就是重复性的,
这时又需要把这些代码抽离,写成新组件
所以,不能奢望一招鲜吃遍天下,应该对于不同的应用场景设计不同的大致通用的模板
不能说组件写的多,说明你的能力不行。
关于Vue的组件的通用性问题的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
随机推荐
- HTML 5篇(持续更新)
1.sessionStorage .localStorage 和 cookie 之间的区别 (一)共同点:都是保存在浏览器端,且同源的. (二)区别:cookie数据始终在同源的http请求中携带(即 ...
- ajax post data 获取不到数据,注意content-type的设置post/get
因为之前一直用jQuery ajax get的方式传递参数, 默认没有设置过 contentType 的值. $.ajax({ url: "/yuanjin/jianxiang", ...
- Mysql 优化配置2
服务器物理硬件的优化 来源社区,个人作为收集 在挑选硬件服务器时,我们应该从下面几个方面着重对MySQL服务器的硬件配置进行优化,也就是说将项目中的资金着重投入到如下几处: 1.磁盘寻道能力(磁盘I/ ...
- ubuntu 安装nodejs和git
1.安装curl sudo apt-get install curl 2.安装nodejs 和 npm curl -sL https://deb.nodesource.com/setup_8.x | ...
- Oracle使用超大SQL脚本文件恢复数据问题记录
在以前获取的Oracle数据库备份一般都是dmp文件,创建表空间和用户就直接使用imp或者impdp导入即可. 这一次遇到的情况比较特殊,对方提供数据时给我的是使用SQLPlus导出的SQL脚本文件, ...
- 【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 ...
- 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
- python全栈学习笔记(一)网络基础之网络协议篇
阅读目录 一.操作系统基础 二.网络通信原理 2.1 互联网的本质就是一系列的网络协议 2.2 osi七层协议 2.3 tcp/ip五层模型讲解 2.3.1 物理层 2.3.2 数据链路层 2.3.3 ...
- 《C++ Primer Plus》读书笔记之——处理数据
本文旨在记录在阅读<C++ Primer Plus>第五版的过程中,一些重点的知识点,方便以后查阅.本文将不断更新...... 一.第三章 处理数据 1.无符号整型不能存储负数值,其优点是 ...
- Ubuntu中的两种link的区别
Ubuntu中有两种link(windows世界中文件的“快捷方式”),一个是hard link(硬链接),另一个是symbolic link(软链接). 那么,什么是硬链接,什么又是软链接呢? 硬链 ...