前言大家好,我是腾讯云开发者社区的 Front_Yue,本篇文章将带领大家探讨如何使用 Vue 插槽,以及最佳实践。Vue 是一款非常流行的前端框架,它提供了很多方便的功能,其中之一就是插槽。插槽是一种非常灵活的方式,可以帮助我们提高组件的复用性。一、什么是插槽插槽是一种 Vue 组件的特殊属性,它可以让我们在组件中插入任意内容。插槽可以让我们在组件中定义一 ......
63
0
0
2024-05-07
1.分析:什么时候要写组件呢? 举例如下图,一个页面中被反复引用的东西,可以将它提取出来写成一个组件。2.组件怎么写? 1.poolicy.vue文件(主页) 在首页导入写的子组件 注意:写js要记得写唯一标识name,vue里面的view也是加唯一标识类名。<template> <view class="Policy-page"&g ......
159
0
0
2024-04-15
本文我们来介绍下Vue中的父子组件的传值问题。 Vue父子组件传值父组件传值给子组件1.案例场景 我们先准备下基础页面,具体如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <meta name=" ......
165
0
0
2024-03-28
Vue.js 是一款流行的 JavaScript 前端框架,它提供了一套完整的工具和 API,使得开发者可以更加高效地构建交互式的 Web 应用程序。其中,组件化是 Vue.js 的一个核心概念,通过组件化可以将一个复杂的应用程序拆分成多个独立的部分,每个部分都有自己的状态和行为,从而方便开发和维护。本篇博客将介绍 Vue.js 组件化的基础知识,包括组件的 ......
111
0
0
2024-02-21
前言 使用方法 <btn-groups :btns="btns" :max="max" class="page-btns"> </btn-groups> 参数部分 name控制属性名 显示按钮的名称{{ item.name }} btns:[{ //按钮名称 ......
105
0
0
2024-02-20
Vue.js 是一款流行的 JavaScript 框架,用于构建用户界面。在 Vue 应用中,组件之间的数据传递是常见的需求。我们将深入探讨 Vue 子组件向父组件传递数据的三种方式。方式一:使用 Props 属性Props 是 Vue 中用于从父组件向子组件传递数据的一种机制。通过在子组件中声明 Props,可以定义期望接收的属性,并通过父组件传递相应的值 ......
105
0
0
2024-02-14
目录一、需求描述:二、问题阐述:三、解决方法:四、实现思路:主要逻辑详解:总结一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。二、问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用上传文件的接口,这样很容易导致服 ......
276
0
0
2023-09-12
目录组件间传值的两个坑实例填坑坑一1. 发现天坑2. 填坑时刻坑2:1.发现天坑2.填坑时刻总结组件间传值的两个坑我们都知道父组件可以把值传递到自组件中,但是有时候子组件需要修改这个父组件传递过来的这个值,我们可以想象下能修改成功吗?这是坑之一。我们在组件间传值的时候,都是一个属性名对应一个值,接收的时候也是用这个属性名接收,那么每一个用户自定义的属性名都能 ......
217
0
0
2023-08-24
目录1.渲染组件2.组件的状态与自更新3.组件实例和生命周期4.props与组件状态的被动更新5.setup函数的作用与实现6.组件事件和emit的实现7.插槽的工作原理及实现8.注册生命周期1.渲染组件从用户的角度来看,一个有状态的组件实际上就是一个选项对象。const Componetn = { name: "Button", dat ......
170
0
0
2023-07-23
目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9、$parent10、sessionStorage传值11、vuex总结不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种 ......
177
0
0
2023-07-20
目录前言:实现基础功能表格进一步定制化总结前言:对于一个业务前端来讲,工作中用的最多的组件我觉得大概率是table组件了,只要是数据展示就不可避免地用到这个组件。用久了就有点熟悉,就来锻炼自己的封装能力,为了更好的搬砖,封装table组件。首先,我们要思考我们封装一个怎样的表格,怎样的形式更加方便。先定一个大概目标,往前走,剩下慢慢去完善。一般来说,我们更倾 ......
464
0
0
2023-07-08
目录vue自定义实现Tree组件和拖拽功能vue2 + js版vue2 + ts 版总结vue自定义实现Tree组件和拖拽功能实现功能:树结构、右键菜单、拖拽效果图vue2 + js版/components/drag-tree/utils/utils.jslet _treeId =; /** * 初始化树 * @param {Array} tree ......
294
0
0
2023-07-02
目录一、组件化诞生的历史二、为什么业务组件越开发越难维护人的问题技术问题2.1 项目现状2.2 理想目标三、举一个实际的例子3.1 需求背景3.2 开发之前: 前端设计文档数据流向图目录结构逻辑控制拆分的原则3.3 受控组件和非受控组件3.4 开发进行: 逻辑变量和UI变量四、持续的优化五、可能的问题五、实践是学习前端的捷径总结组件化是一种思维的表现,这种技 ......
211
0
0
2023-06-28
目录组件生命周期创建阶段beforeCreate阶段created阶段beforeMount阶段mounted阶段运行阶段beforeUpdate阶段updated阶段销毁阶段beforeDestroy阶段destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时 ......
159
0
0
2023-06-22
目录背景介绍使用方法源码分析背景介绍近期业务开发,会想起之前做的两个组件的通信,社区推荐使用一个迷你库miit (200b), 因为vue3开发中没有了 EventBus 跨组件通信,这个替代的方案 mitt.js,原理还是 EventBusEventBus在多个组件之间进行事件通信的场景下还是比较有用的,通过监听事件和触发事件,可以在订阅者和发布者之间解耦 ......
216
0
0
2023-06-22