vuejs组件库 - 腾讯云开发者社区

组件的关系父子组件父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。...provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。...$attrs和$listeners 如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？...，向下找到所有指定的组件；由一个组件，找到指定组件的兄弟组件。...详情可参考：https://vuex.vuejs.org/zh-cn/ 参考 vue组件之间8种组件通信方式总结参考 https://github.com/iview/ivie...

8464 1

滴滴开源基于金融场景的Vuejs组件库Mand Mobile

4月11日消息，滴滴今日宣布开源一款基于金融场景的Vuejs组件库——Mand Mobile。...该工具是基于Vuejs 2.0开发的移动端组件库，它遵循统一的视觉设计规范，由包括基础、表单、操作反馈和业务在内的四类组件组成。...经过一年时间的积累，组件库已应用于四大业务板块共10余款产品中，并在业务的考验中逐渐成熟。项目特点丰富的组件 Mand Mobile提供了30+的实用组件，能够满足移动端页面开发中的大部分需求。...为了更直观的介绍组件使用方法以及效果，我们针对每个组件都提供了多个可以即时操作的demo，从而让用户能更直观地了解组件的各项功能。 Chart Demo ? Chart API ?...在继续完善现有组件的同时，我们还会继续积累更多的实用组件，另外也会尝试将视觉和逻辑抽离，从而来满足更多更广泛的使用需求。

1.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

vuejs中缓存组件状态-keepAlive

前言在 vuejs中，我们经常需要缓存一些组件的状态，比如用户登录后，切换到其他页面，再切换回来，需要保留之前的登录状态，而不是重新登录。...或者在切换不同组件的时候，需要保留之前的组件状态，而不是重新加载。如果你什么都不设置你会发现，之前已更改的状态都被重置了。...在切换时创建新的组件实例通常是有意义的，但在有些情况下，我们的确想要组件能在被“切走”的时候保留它们的状态。...要解决这个问题，我们可以用内置组件将这些动态组件包装起来代码示例组件将会被缓存！...name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive缓存，就必须显式声明一个 name选项注意事项使用的单文件组件会自动根据文件名生成对应的 name

2251 0

VueJs中如何使用Teleport组件

前言在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件但是从整个页面应用的视图上看,它在DOM中应该被渲染在整个vue应用外部的其他地方,不能影响组件的结构...css布局位置非常难控制鉴于这样的场景和困难,Vue官方提供了一个Teleport组件,很好的可以解决这个问题,让开发者不需要顾虑DOM结构的问题 01 组件套组件层次结构很深时比如:现在有两个组件...,父组件,子组件,在后代组件内,添加一个按钮,弹出一个模态框,让它在页面垂直水平居中显示如下所示,父组件如下所示App.vue ...它是Vue官方提供的一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去也就是一种能够将我们的组件html结构移动到指定位置的技术组件嵌套层级很深,而后代组件中的模板,想要脱离当前组件结构,解决css布局层面的干扰,那就可以用这个teleport组件拓展官方示例 Teleport示例() https://cn.vuejs.org

2.3K2 0

一个表格组件-vuejs示例

分析vuejs官网上一个表格组件的实现过程。原址：https://cn.vuejs.org/v2/examples/grid-component.html 1、新建一个demo和vue实例 <!...v-model双向绑定的数据值 searchQuery : '' } }); 3、注册一个子组件组件demo-grid，并在父实例的模块中以自定义元素的形式使用要让子组件使用父组件的数据，我们需要通过props选项。...（demo-grid）继续添加选项对象 ①data 定义子组件内部的数据对象。...子组件这里的data必须是一个函数。

1.4K1 0

Vuejs中父组件主动调用子组件的方法

我们都知道，vue是单向流，但是有时候我们需要在父组件中主动通知子组件一些信息，使其做出一些响应变化，那么如何在父组件中去主动调用子组件的方法呢？...Vue当然给我们提供了方法，如下：首先在子组件中进行事件广播 created: function(){ this....; }); } 在父组件中指定子组件的ref，如child，然后通过一下方式调用： this.$refs['child'].

5K3 1

VueJS 中更好的组件组合方式

VueJS 中有一些组合组件并复用逻辑的方法。在本文中，我将展示一种在 Vuejs (2.* 及 3.*) 中改进组合方式的方法。...下面，你可以看到一个实现了一种常规用例（从远端获取一个简单的数据并将其搭配不同的转场效果显示出来）的组件，尽管大部分逻辑及其相关的模版、数据和其它变量等与出现在其它地方或组件中的相同逻辑并无不同，它们还是出现在了该组件中...这种方式有助于组织代码、让组件更易读，并有助于降低总体复杂度。作为一种建议，我相信这些应该是重构巨大、复杂和混乱的组件时的首要之事。...借助 VueJS 有多种实现的方法，但我却想使用 TSX (你若更喜欢 JSX 也行) 来重构代码： import useFetchData from...所以，不同于扩展已有的组件并覆写组件的函数的是，我们可以真正传入期望的组件和函数了。Typescript 在此仅有助于强类型化和类型推断，所以只用 Javascript 也是足够的。

1.3K2 0

vuejs中的组件以及父子组件间通信传值

单纯的vuejs其实是不足以撼动jQuery的地位的,它的强大之处在于它的生态系统非常丰富,路由,模型,UI组件等各个部分的钩子等令vuejs风靡国内外,借鉴了Angular中指令,React中组件化等...在vuejs中组件与组件之间的通信,关联操作,数据共享,路由状态的切换变更,UI组件的嵌套,插件与主程序的额外拓展等,如果处理他们起来觉得很简单,那才是真简单.....,这里使用vue的方式暂且先通过script标签脚本注入的方式进行使用,与引用jQuery库方式没有什么区别未组件化实现todolist css代码省略与上面的一致 html代码(模板）：内容结构上最外层包裹了一个根元素...,兄弟组件,非父子组件,最后实现todolist,分别用原生js，jQuery,Vue逐一实现的,使用原生js，JQuery,主要是感受比较他们与vuejs的差异例子虽然比较简单,但是它囊括了很多知识...... vuejs虽然强大,但是底层核心逻辑依然是是不变的,有些事情仍然是需要我们自己做的,只不过是原生js,jQuery是面向DOM编程,而vuejs可以理解为面向数据编程,它关注的是数据层model

20.5K1 0

Toast组件开发实践（Vuejs3.x）

进入正题 Toast组件几乎是没有个组件库必备的组件，通过Toast组件开发可以比较全面的学习Vuejs的相关技能点，一起来看一下~ 基础项目准备依旧推荐你来1024Code Fork 我的《【项目模板...）和组件文件（index.vue），下面是Toast组件的样式及DOM结构，接下来将为其增加一系列必要的内容。...在Vue3中挂载全局变量需要在globalProperties上添加，具体可以看Vuejs文档。...Toast组件增加一下状态切换时的动画效果，可以使用Vuejs内置的Transition，它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上，通过v-if状态的变化即可激活绑定的动画效果。...，在整个开发流程中涉及的Vuejs的属性、状态、监听器的使用，还有插件开发时的规则及全局变量的挂载，并且在组件使用时针对使用了setup后无法读取this而正确读取全局变量的，最后还提到了一点Vuejs

1.4K1 0

Vuejs函数式组件，你值得拥有(1)

函数式组件在React社区很流行使用，那么在vue里面我们要怎么用呢下面会涉及到的知识点：高阶函数、状态、实例、vue组件什么是函数式组件我们可以把函数式组件想像成组件里的一个函数，入参是渲染上下文...(render context)，返回值是渲染好的HTML 对于函数式组件，可以这样定义： Stateless(无状态)：组件自身是没有状态的 Instanceless(无实例)：组件自身没有实例，也就是没有...this 由于函数式组件拥有的这两个特性，我们就可以把它用作高阶组件(High order components)，所谓高阶，就是可以生成其它组件的组件。...---- 下面示例的完整Demo 那创造一个函数式组件吧 functional: true加上render function，就是一个最简单的函数式组件啦，show your the code, 下面就创建一个名为...，事件只能由父组件传递。

5340 0

vuejs — 父组件向子组件传值（父传子）「建议收藏」

来看一下vue中的父组件向子组件传值的过程：（父组件）向（子组件）传值，那么子组件需要一个属性接收，大家应该都知道，使用 props 来接收；举个例子：有子组件...可以将这个数组，提出来放到父组件中，谁要用父组件就传给谁。父组件向子组件传值，属于属性传值。 props是子组件访问父组件数据的唯一接口....单向数据流： props是单向绑定的当父组件的属性变化时，将传导给子组件，但是反过来不会。每次父组件更新时，子组件的所有 props 都会更新为最新值。不要在子组件内部改变 props。...提出，放到父组件App.vue中， -》看一下添加了数组Users的父组件App.vue，我们思考：父组件、子组件之间有关联的地方是什么，没错，就是在调用子组件的时候，即下图中的组件的users数组传给子组件呢？？？在子组件Users.vue，通过 -》props 属性接收父组件所传的数组 -》users 如下图所示：如此，便是父传子了。

1.4K3 0

vuejs媒资库项目展示

媒资库负责帮海广监控特定媒体大号及指定关键词对应的实时博文,根据舆情关键字进行异常提醒，并支持快捷的一键发布至CMS系统，实现快捷的内容转载及新浪媒资内容的二次消费。...基于vuejs前端框架下的elementui进行开发 , 使用布局容器和栅格布局实现系统的整体页面框架使用vuejs的事件模型,响应式原理和模板渲染 , 获取接口数据渲染页面 , 实现数据的双向绑定灵活开发...使用elemntui的各功能组件 , 比如:表格分页表单模态框弹出层等进行页面功能的实现基于现有CMS后端框架逻辑进行接口对接 , 传递信息流数据 ?

5201 0

【Vuejs】339- Vue.js 组件通信精髓归纳

组件的关系父子组件父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。...provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。...$attrs和$listeners 如果父组件 A 下面有子组件 B，组件 B 下面有组件 C，这时如果组件 A 想传递数据给组件C怎么办呢？...，向下找到所有指定的组件；由一个组件，找到指定组件的兄弟组件。...详情可参考：https://vuex.vuejs.org/zh-cn/。

8642 0

10+个很酷的VueJS组件，模板和实验示例

，这些组件可以组合在一起并看起来非常漂亮。...Vue White仪表板具有16个以上的独立组件，可让你自由选择和组合。所有组件的颜色都可以不同，你可以使用Sass文件轻松进行修改。 ?...展示包括基于VueJS的主题，元素，仪表板等。 ?...它是开源的，免费的，并且具有许多组件，可以帮助你创建出色的网站。Vue Argon仪表板内置了100多个单独的组件，因此你可以选择和组合，因为实现了所有元素，所以从原型化到全功能代码将节省大量时间。...https://demos.creative-tim.com/vue-argon-dashboard Pagekit Pagekit是使用Symfony组件和VueJS构建的模块化，轻量级CMS。

2.2K2 0

Vuejs中slot实现自定义组件header、footer等

Vuejs中slot实现自定义组件header、footer等 vue中的slot主要负责内容分发，之前有介绍过slot的内容，具体链接：http://www.cnblogs.com/vipzhou/p.../6640056.html，这节主要模拟下一些ui组件比如iview等一般会为组件添加一些slot属性，这些slot如果外部指定的话，会显示指定的，不指定的话则会展示默认的slot，具体实现可以参考如下...Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合 footer </div..."#app", components: { 'shoufa': sf } }) 如上，如果父组件中不指定...slot="title"的插槽，则会自动展示子组件中的title插槽的默认内容，这样就实现了一个简单的slot内容分发。

2K4 0

VueJS ajax

vue-resource的 github: https://github.com/pagekit/vue-resource 4.2 axios Axios 是一个基于 promise 的 HTTP 库，

2.9K5 0

【Vuejs】1720- 详细聊一聊 Vue3 动态组件

我们可以使用 Vue 内置的 [](https://vuejs.org/guide/built-ins/transition.html "") 组件和过渡类名...，被切换的组件会被销毁，因此可以使用 Vue 内置的 [](https://vuejs.org/guide/built-ins/keep-alive.html "<keep-alive...学习资源如果您想深入学习 Vue3，可以参考以下学习资源： Vue 官方文档[2] Vue Mastery 课程[3] 基于 CSS 的过渡效果[4] 参考资料 [1] 动态组件: https://vuejs.org.../guide/essentials/component-basics.html#dynamic-components [2] Vue 官方文档: https://vuejs.org/guide/essentials...https://www.vuemastery.com/courses/advanced-components/dynamic-components [4] 基于 CSS 的过渡效果: https://vuejs.org

8932 0

前端组件库_前端组件库有什么好处

Super minimal selector and event library skel.js – A lightweight responsive framework JavaScript 工具库...underscore.js Way.js – 双向数据绑定库 Keys.js – 应用快捷键 3....Egret Engine LimeJS EaselJS three.js AlloyStick The-Best-JS-Game-Framework CanvasEngine Quintus 4. ui组件库...Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件 13.19...通知组件/弹框组件 alertify.js AlertifyJS SweetAlert Messenger – 非常酷的弹框组件 PNotify Notify.js – A simple, versatile

6.3K1 0

TinyVue组件库

——董仲舒文档： TinyVue：一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端代码： https://github.com/opentiny/...tiny-vue 在项目的根目录中，打开控制台，执行以下命令，为 Vue 3.0 的项目安装 TinyVue 组件库： yarn add @opentiny/vue@3 # 或者 npm install...@opentiny/vue@3 或者执行以下命令，为 Vue 2.0 的项目安装 TinyVue 组件库： yarn add @opentiny/vue@2 # 或者 npm install @opentiny...id="app"> import { createApp } from 'vue' // 引入 @opentiny/vue 组件...tiny-button> ` }) // 注册 @opentiny/vue 组件

1271 0

VueJS文档生成

安装jsdoc-vuejs插件 https://github.com/Kocal/jsdoc-vuejs npm install --save-dev jsdoc-vuejs 3....配置JSDoc 新建conf.json文件 { "plugins": [ "node_modules/jsdoc-vuejs" ], "source": { "includePattern...JSDoc语法文档 jsdoc-vuejs插件新增了以下几个块标签 @vue-prop @vue-data @vue-computed 用法和@param一样。 6.

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

vuejs组件通信精髓归纳

滴滴开源基于金融场景的Vuejs组件库Mand Mobile

vuejs中缓存组件状态-keepAlive

VueJs中如何使用Teleport组件

一个表格组件-vuejs示例

Vuejs中父组件主动调用子组件的方法

VueJS 中更好的组件组合方式

vuejs中的组件以及父子组件间通信传值

Toast组件开发实践（Vuejs3.x）

Vuejs函数式组件，你值得拥有(1)

vuejs — 父组件向子组件传值（父传子）「建议收藏」

vuejs媒资库项目展示

【Vuejs】339- Vue.js 组件通信精髓归纳

10+个很酷的VueJS组件，模板和实验示例

Vuejs中slot实现自定义组件header、footer等

VueJS ajax

【Vuejs】1720- 详细聊一聊 Vue3 动态组件

前端组件库_前端组件库有什么好处

TinyVue组件库

VueJS文档生成

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐