vue【封装 Vue.js 组件库】

最新推荐文章于 2024-04-02 18:15:25 发布
最新推荐文章于 2024-04-02 18:15:25 发布
阅读量242 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37883657/article/details/114117084
版权

一、组件库有哪些

  • element-iu
  • iview 
  • CDD （Component-Driven Development）
    • 自下而上
    • 从组件级别开始，到页面级别结束
    • CDD 的好处
      • 组件在最大程度被重用
      • 并行开发
      • 可视化测试

二、组件库开发流程 

1、处理组件的边界情况

  • $root
    • 小型应用中可以在 vue 根实例里存储共享数据，组件中可以通过 $root 访问根实例



  • $parent / $children
    • $parent





    • $children 获取要用索引，可读性不高




       
  • $ref
    • 获取普通的 Dom 对象
    • 获取对应的子组件对象



  • 依赖注入 provide / inject 获取父组件中的成员
    • 自定义组件可以使用
    • 不建议改变引用的 inject 的值

最低0.47元/天 解锁文章
Daisy__yangyang
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div点击展开 vue_封装 Vue.js 组件库
weixin_31885875的博客
01-08 166
文章内容输出来源：拉勾教育大前端高薪训练营必备知识组件分类第三方组件：对界面UI要求不高基础组件：对界面UI要求高业务组件：针对特定的业务。譬如财务，入库等页面中的传值依赖注入provide / inject// parent.vue <template> </template> <script> export default { data() { ...
封装 Vue.js 组件库
qq_32090185的博客
01-27 732
Study Notes 封装 Vue.js 组件库 组件库介绍 开源组件库 Element-UI IView Vant CDD(组件设计文档) 自下而上 从组件级别开始，到页面级别结束 CDD 的好处 组件在最大程度上被重用 并行开发 可视化测试 处理组件边界情况 vue 中处理组件边界情况的 API $root 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。 $parent 父实例，如果当前实例有的话。 $children 当前实例的直接子组件。需要注意 $chil
封装Vue.js组件库
woyebuzhidao321的博客
03-15 711
一、组件库介绍 1. 开源组件库 Element-UI IView 2. 组件开发方式CDD 自下而上 从组件级别开始，到页面级别结束 3. CDD的好处 组件在最大程度上被重用 并行开发 可视化测试 二、处理组件边界情况 vue中处理组件边界情况的API $root main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render:
封装一个vue3的公共组件
最新发布
Jet_Lover的博客
04-02 1329
如果你发现某个组件在多个地方重复使用，那么将其封装成公共组件是很有意义的。：定义一个公共的快递组件选择，首先在项目的src下面定义一个文件夹components，然后在里面创建文件ExpressList.vue。：当有一些组件是业务无关的，并且可以在不同的项目中重复使用时，将其封装成公共组件。：有些复杂的组件可以被拆分成若干公共组件，每个公共组件承担不同的责任，这样做不但提高了可维护性，也方便了代码的重用。到这里一个基础的下拉选择快递的公共组件模版就完成了，最后那么在项目里面怎么使用呢？
开箱即用 - 在vue中封装.js文件(公共函数)并引入的使用总结
cabinx的博客
08-26 5050
开箱即用 - 在vue中封装.js文件(公共函数)并引入的使用总结 1.业务需求： 这是我们在日常开发中常见的一个需求，在vue中封装JS文件（这个JS文件是一些公共函数的封装文件），并在项目中引入。 2.解决方案： 1.首先我们需要将公共函数封装成一个独立的common.js文件，封装示例如下： // 单个函数： export default function outF () { console.log('这是一个公共函数') } // 多个函
Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
每天进步一点点
08-08 492
好处main.js root.vue 1.2.2 $parent 获取的数据是响应式的 parent.vue child.vue grandson.vue 1.2.3 $children 获取所有子组件 parent.vue children1.vue children2.vue 1.2.4 $refs 如果你把它作用到普通 HTML 标签上，则获取到的是 DOM 如果你把它作用到组件标签上，则获取到的是组件实例 parent.vue myinput.vue 1.2.5 provide / in
vue-tippy封装Tippy.jsTooltip库的一个Vue.js组件
08-07
1. **组件化**：Vue-tippy将Tippy.js的功能封装成Vue组件，使得在Vue项目中集成tooltip更加简单。只需在模板中引入组件，通过配置props来定制tooltip的样式和行为。 2. **动态绑定**：Vue的数据绑定机制允许你动态...
vue.js封装switch开关组件的操作
01-18
我的项目本来用的element，但是switch开关不符合设计要求，于是自己封装了一个switch组件，并且实现了switch开关的双向数据绑定 [> <input type=checkbox class=switch-input @change=toggle /> <div ...
vue-fabric-next:Vue 3的fabric.js库包装
04-17
由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具...
Vue02. Vue.js 组件开发.pdf_前端学习资料
09-01
- 组件是Vue.js最强大的特性，它允许你定义自定义元素，封装可重用的代码。 - 组件可以扩展HTML元素，Vue的编译器为其提供特殊功能，甚至可以以原生HTML元素的形式存在，通过`is`属性进行扩展。 2. **注册组件**...
vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示
07-17
vue2，3+js+ts的three.js 项目，一共四个项目 ，厂房，机台，楼层显示
记录--封装一个通过js调用的全局vue组件
林恒的博客
06-17 1022
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在使用vue项目编写的时候，不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了，但是由于api的限制，我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue()、Vue.e...
Vue组件化开发--公共组件的封装
coinisi_li的博客
02-10 6744
项目中很多模块经常会复用：侧边导航组件、分页、文件下载、项目中常用的 echarts图表的封装（比如折线图、柱状图等），或者一些后台管理、菜单管理中很多可复用组件，表单之类的。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。一般在搭建项目的时候，会创建一个views目录、一个commen目录和一个feature目录。用vue开发的项目，都是采用组件化的思想开发的。3. event自定义事件。2. slot定制插槽。1. props参数。
基于 vue.js 进行组件封装的方案
Mr.Tang的博客
03-23 667
我们将从分析组件封装的优势开始，然后依次介绍 vue.js 的基本概念，以及如何创建、封装和使用自定义组件。最后，我们将通过一个实际的示例，演示如何实现一个基于 vue.js 的组件封装方案。在 plugins 文件夹中，创建一个新的 .js 文件，例如：custom-component-plugin.js。复用性：组件封装可以将常用的功能或视图模块抽象为独立的组件，从而实现代码的复用，提高开发效率。首先，在项目中创建一个新文件夹，例如：components，用于存放自定义组件。
vue3+vite+daisyUI安装使用教程（支持版本js/ts）daisyUI快速上手，解决TailwindCSS疯狂堆砌class的问题(超详细)
qq_53722480的博客
05-06 1650
vue3+vite+daisyUI安装使用教程（支持版本js/ts）daisyUI快速上手，解决TailwindCSS疯狂堆砌class的问题
Vue公共组件的封装
热门推荐
qq_38148024的博客
07-20 2万+
Vue组件的三要素 1. props参数 2. slot定制插槽 3. event自定义事件 基本组件开发 创建一个.vue文件，其中包含template、script以及style： <template> <div class="headComponent"> {{{ msg }} </div> </template> <script> export default { props:['data','type'],
vue封装公共方法、组件
weixin_47783830的博客
07-11 3730
vue组件封装调用
vue.js如何单独封装组件并引用
02-17
Vue.js允许您封装可重用的组件并在应用程序中多次使用它们。以下是单独封装和引用Vue组件的基本步骤： 1. 创建组件 使用Vue.js创建一个组件。您可以将其放在一个单独的文件中，并通过导出来暴露组件。例如，假设您正在创建一个名为"MyComponent"的组件。可以创建一个名为"MyComponent.vue"的文件，并使用以下代码： ``` <template> <div> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', // 组件的逻辑 } </script> <style> /* 可选的组件样式 */ </style> ``` 2. 导入组件 将组件导入到您的应用程序中。在Vue.js中，您可以使用import语句从文件中导入组件。在您的Vue应用程序中使用以下代码： ``` import MyComponent from './MyComponent.vue'; export default { name: 'App', components: { MyComponent } } ``` 3. 使用组件 在您的应用程序中使用组件。一旦将组件导入到应用程序中，您可以在应用程序的模板中使用它。例如，在App.vue中，您可以使用以下代码： ``` <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { name: 'App', components: { MyComponent } } </script> <style> /* 可选的样式 */ </style> ``` 在上面的示例中，您可以看到在模板中使用`<my-component>`标签来使用组件。该标签会自动渲染"MyComponent"组件的内容。 注意，您需要在组件的定义中设置正确的名称，以便在使用组件时引用它。在上面的示例中，组件名称为"MyComponent"，因此您可以在模板中使用`<my-component>`标记。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值