了解 Vue 工程化开发中的组件通信
目录 1. 组件通信语法 1.1. 什么是组件通信？ 1.2. 为什么要使用组件通信？ 1.3. 组件之间有哪些关系（组件关系分类）？ 1.4. 组件通信方案有哪几类 ？ 2. 父子通信流程图 3. 父传子 3.1. 父传子核心流程props 4. 子传父 4.1. 子传父核心流程$emit 5. ...
每日一VUE——组件基础-组件间传递数据
props 在子组件中添加props选项，表示从父组件接受参数 <body> <div id="app"> <!-- 使用Greeting组件 --> <greeting name="Alice" message="Hello"><...
《Vue.js实战》章七 组件——标签页组件：思路详解
先上带有部分注释的全部代码<!DOCTYPE html><html lang="en"><head> <meta c...
vue改变子组件props属性值
1.使用v-model和$emit <!-- 父组件 --><template> <ChildComponent v-model="propValue" /></template><script setup>import { ref } ...
解决vue Vant组件省市区选择组件 省市区不显示不出来一直加载问题
1.首先我们先看手册，将import相关信息导入，看手册代码演示，发现问题 实际代码中data（）中areaList是不允许这样写的 代码会报错 2.既然不能这么写，我们就需要改一下，继续看手册 ，发现areaList是个对象 那我们这样写试一下 编译器没有报错，运行一下也没有报错，但是发现省市区没...
Vue.js实战—iView经典组件剖析
iView是一套基于Vue.js2的开源UI组件库，主要服务于PC界面的中后台产品。它是深度封装40多个常用业务组件同时也是一整套前端解决方案，包括设计规范、基础样式、支持服务器渲染（SSR），同时也提供了可视化脚手架方便快捷构建项目。iView以高质量、细致漂亮的UI、事无巨细的文档等特点成为Vu...
Vue组织架构树图组件vue-org-tree的使用
说明最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下：快速开始安装npm install --save-dev less less-loadernpm install -...
vue前端数据可视化echart实践经验（一）组件细分
echart在前端数据可视化中有丰富的使用方式，但是其也有一般通用的实践方式。经过多个项目，现将个人echart使用的经验总结如下：尽量将每一个echart可视化单独拆分为一个组件从代码习惯上来说，将不同的echart可视化拆分为组件是一个良好习惯。下面是一个例子，我们有频道偏好和内容产地偏好两个页...
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
文章目录 一、v-model是什么二、什么是语法糖三、v-model常见的用法1、对于输入框（input）：2、对于复选框（checkbox）：3、对于选择框（select）：4、对于组件（component）：四、v-model修饰符五、v-model 仅仅是语法糖吗？六、v-model ...
解决vue引入组件报错，和调用组件步骤及封装步骤
这里调用了组件然后报错Unknown custom element: <myAddress> - did you register the component correctly? For recursive components, make sure to provide the "n...
在jeecg中使用a-upload(ant-design-vue组件)出现http:localhost:3000/sys/common/upload错误，页面上传不到指定路径
修改如下：<template> <div> <a-upload name="file" :multiple="true" :action="url.fileUpload" :headers="hea...
使用Element UI框架（基于vue2.0）的upload组件上传图片至七牛云
整体流程如下：下面我们开始具体的流程：一、写一个后台接口，用于生成七牛token这里我使用的是python的tornado框架写的该接口，接口路由地址：/qiniu/upload/getToken如果，你的前端和后台项目不是部署在一台服务器上或者部署在一台服务器上端口号不同的情况下，你需要考虑到跨域...
使用Vue设置iview组件中Datepicture插件显示默认日期
要实现功能的是进入该页面，时间选择框默认显示当前日期及其前七天的日期时间段，也可以自己另行修改iview的官方API中有设置start-date属性来设置默认显示，但是设置这个属性只是控制的面板有显示，选择框并不显示时间，如下图所示我用这种办法并没有实现，如果有大神实现可以分享一下在看时间选择器的时...
在vue-cli中使用iview组件上传多个文件的功能
在vue-cli中使用iview组件上传多个文件的功能思路：创建一个数组 把需要上传的文件 push到这个数组里面需求：点击提交按钮把上传后得文件URL地址当做参数传给后台；多个文件使用逗号隔开样式随便写的，自己做的demohtml代码<template> <div> ...
vue中解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题
解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题1.需求背景2.核心解决方法3.两对鼠标事件的区别（1）mouseover 和 mouseout（2）mouseenter 和 mouseleave1.需求背景项目中，要对系统功能进行分类索引...
如何在vue组件中添加全局样式及公共样式。
如何在vue组件中添加全局样式及公共样式。1.添加公共样式，在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式。2.在main.js中导入global.css，即import "./assets/css/global.css"使得全局样式生效。3.这样所有的vue组...
Vue中使用公共组件（最简单易懂）
1、首先，在什么情况下我们需要使用公共组件，以案例为例，这里的公共的组件就是不同页面下的相同的头部。2、首先我们先新建一个公共的头部组件，取名为headTop,然后在组件中写入的界面内容。3、在需要引入公共组件的页面导入组件，分别需要在三个地方写代码，头部：脚本：4、就这样就可以引入我们需要的公共组...
vue中使用vuex缓存组件
在app.vue中，使用keep-alive，它的属性include，来缓存组件配合使用vuex，来添加需要缓存的组件在需要做缓存的组件内使用1，引入vuex2，触发mutations 里的 addCachePage 方法，this.$store.commit(‘addCachePage’, ‘te...
VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开（收起）；一键全选（不全选）
需求： 产品要求权限树形结构添加外部复选框进行全部展开或收起；全选或不全选。 实现步骤： tree组件部分： <div class="role-handle"> <div>权限选择(可多选)</div> <div> <el-che...
vue-router中引入vue组件的两种方式
前提在vue的路由配置文件(routers.js)中，有如下两种引入组件的方式：一：调用时间require: 运行时调用，理论上可以运用在代码的任何地方 import：编译时调用，必须放在文件开头二：加载效率1、懒加载：component: resolve => require(['@/vie...