搜索到
103
篇与
的结果
-
el-datepicker设置可选日期范围 1.只能选择当前及以后的日期<el-date-picker v-model="value1" type="date" :picker-options="pickerOptions"> </el-date-picker> data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, }2.只能选择今天以及今天以前的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, } }3.只能选择今天之后的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); } }, } }4.只能选择今天之前的日期data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }5.设置选择三个月之前到今天的日期data (){ return { pickerOptions0: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths;; } }, } }组件代码<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker> -
-
vue-big-screen： 一个基于 vue+datav+Echart 框架的大数据可视化（大屏展示）模板 一、项目描述React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。项目需要全屏展示（按 F11）。项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 按需引入。拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。请拉取 master 分支的代码，其余是开发分支。友情链接：Vue 官方文档DataV 官方文档echarts 实例，echarts API 文档项目 gitee 地址（国内速度快）二、主要文件介绍文件作用/功能main.js主目录文件，引入 Echart/DataV 等文件utils工具函数与 mixins 函数等views/ index.vue项目主结构views/其余文件界面各个区域组件（按照位置来命名）assets静态资源目录，放置 logo 与背景图片assets / style.scss通用 CSS 文件，全局项目快捷样式调节assets / index.scssIndex 界面的 CSS 文件components/echart所有 echart 图表（按照位置来命名）common/...全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改）三、使用介绍启动项目需要提前安装好 nodejs 与 npm,下载项目后在项目主目录下运行 npm/cnpm install 拉取依赖包。安装完依赖包之后然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 npm install @jiaminghi/data-view 或者 yarn add @jiaminghi/data-view 进行手动安装。封装组件渲染图表所有的 ECharts 图表都是基于 common/echart/index.vue 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。项目配置了默认的 ECharts 图表样式，文件地址：common/echart/theme.json。封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。参数名称类型作用/功能 idString唯一 id，渲染图表的节点（非必填，使用了 $el）classNameStringclass样式名称（非必填）optionsObjectECharts 配置（必填）heightString图表高度（建议填）widthString图表宽度（建议填）动态渲染图表动态渲染图表案例为 components 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。chart 文件的主要逻辑为：<template> <div> <Echart :options="options" id="id" height="height" width="width" ></Echart> </div> </template> <script> // 引入封装组件 import Echart from '@/common/echart' export default { // 定义配置数据 data(){ return { options: {}}}, // 声明组件 components: { Echart}, // 接收数据 props: { cdata: { type: Object, default: () => ({}) }, }, // 进行监听，也可以使用 computed 计算属性实现此功能 watch: { cdata: { handler (newData) { this.options ={ // 这里编写 ECharts 配置 } }, // 立即监听 immediate: true, // 深度监听 deep: true } } }; </script>复用图表组件复用图表组件案例为中间部分的 任务通过率与任务达标率 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 components/echart/center/centerChartRate 里进行接收并在对应位置赋值即可。如：在调用处 views/center.vue 里去定义好数据并传入组件//组件调用 <span>今日任务通过率</span> <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /> <span>今日任务达标率</span> <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> ... import centerChart from "@/components/echart/center/centerChartRate"; data() { return { rate: [ { id: "centerRate1", tips: 60, ... }, { id: "centerRate2", tips: 40, colorData: { ... } } ] } }更换边框边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看如：<dv-border-box-1></dv-border-box-1> <dv-border-box-2></dv-border-box-2> <dv-border-box-3></dv-border-box-3>更换图表直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。Mixins 解决自适应适配功能使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 utils/resizeMixins.js 中，应用在 common/echart/index.vue 的封装渲染组件，主要是对 this.chart 进行了功能注入。屏幕适配本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，// flexible文件位置: `common/flexible.js`,修改部分如下 function refreshRem() { var width = docEl.getBoundingClientRect().width; // 最小1366px，最大适配2560px if (width / dpr < 1366) { width = 1366 * dpr; } else if (width / dpr > 2560) { width = 2560 * dpr; } // 原项目是1920px我设置成24等份，这样1rem就是80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }请求数据现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。axios 的 main.js 配置参考范例（因人而异）import axios from 'axios'; //把方法放到vue的原型上，这样就可以全局使用了 Vue.prototype.$http = axios.create({ //设置20秒超时时间 timeout: 20000, baseURL: 'http://172.0.0.1:80080', //这里写后端地址 });四、更新情况增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。修复了头部右侧的图案条不对称的问题。修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。使用 Mixins 注入图表响应式代码。vue-awesome 改成按需引入的方式。封装渲染函数，抽离了数据使逻辑更加清晰。新增地图组件，并添加自动轮播功能五、其余这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
-
同一nginx服务器部署多个vue项目 项目上使用了大屏，由于大屏的框架样式与业务系统存在冲突，所以决定单独拆分成两个独立的vue项目。一、项目信息首先两个项目，一个web存放的是业务系统，正常访问。另外一个bigscreen作为大屏使用，通过二级目录/bigScreen访问二、web项目处理web项目不需要特殊处理，正常build即可。三、bigscreen项目处理1. 修改配置文件vue.config.js打开项目根目录下的vue.config.js文件，修改public如下publicPath: process.env.NODE_ENV === "production" ? "/bigScreen" : "/",2. 修改src/router/index.js, 项目页面跳转路由const router = new VueRouter({ mode: "history", base: '/bigScreen', routes })3. 配置nginxnginx配置文件，添加如下节点location /bigScreen/ { alias /www/wwwroot/dotnetcore.com.cn/bigScreen/; index index.html index.htm; try_files $uri $uri/ /bigScreen/index.html; # 内部项目跳转路径 }四、项目部署原始项目，还是放到根目录。bigScreen在网站根目录下创建bigScreen文件夹，并将生成的文件上传到bigScreen目录下。
-
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行 实现首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList，并且通过<el-table-column type="selection" width="30" align="center" />添加了勾选框。然后通过@selection-change="handleDetailSelectionChange设置其勾选框改变事件。这里的数据源bcglXiangXiList要提前声明 data() { return { //详细list bcglXiangXiList: [],这里的每一列是不同的控件，但是最终都要有v-mode进行动态数据绑定。 <el-table v-loading="loading" :data="bcglXiangXiList" :row-class-name="rowClassName" @selection-change="handleDetailSelectionChange" ref="tb" > <el-table-column type="selection" width="30" align="center" /> <el-table-column label="序号" align="center" prop="xh" width="50"></el-table-column> <el-table-column label="开始时间/最早时间-结束时间/最晚时间" width="250" prop="sjfw"> <template slot-scope="scope"> <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至" clearable @change="changesjfw(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].sjfw" ></el-time-picker> </template> </el-table-column> <el-table-column label="指定天数" align="center" prop="ts" width="150"> <template slot-scope="scope"> <el-select clearable @change="changezdts(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].ts" > <el-option v-for="dict in zdtsOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> </el-select> </template> </el-table-column> <el-table-column label="打卡地点" align="center" prop="dkdd" width="150"> <template slot-scope="scope"> <el-select clearable @change="changedkdd(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].dkdd" > <el-option v-for="dict in dkddOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> </el-select> </template> </el-table-column> <el-table-column label="最小井下累计时间-最大井下累计时间" width="250" prop="jxsjfw"> <template slot-scope="scope"> <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至" clearable @change="changejxsjfw(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw" ></el-time-picker> </template> </el-table-column> </el-table>这里的数据源是个数组，所以绑定的每一行都是一个对象，怎样将每行与数据库源对应起来？首先怎样实现第一列的序号字段。这里通过设置el-table的:row-class-name="rowClassName"来实现，其中rowClassName是回调函数。所以需要在函数中实现rowClassName rowClassName({ row, rowIndex }) { row.xh = rowIndex + 1; },其中row是行对象，rowindex是行号，从0开始。所以这样就能实现了序号(xh属性)递增并且取值为行号加1。然后怎样实现勾选框单选？通过设置el-table的@selection-change="handleDetailSelectionChange"来实现对应的实现方法handleDetailSelectionChange中 //单选框选中数据 handleDetailSelectionChange(selection) { if (selection.length > 1) { this.$refs.tb.clearSelection(); this.$refs.tb.toggleRowSelection(selection.pop()); } else { this.checkedDetail = selection; } },这里的section本来是多选时选中项的数组，这里通过 this.$refs.tb获取到这个el-table，但是要提前给这个el-table设置ref="tb"然后判断所选的数组的长度大于1就清空并选中当前行，否则就将当前选中的赋值给checkedDetail,所以需要提前声明checkedDetail//选中的从表数据 checkedDetail: [],这样在上面对这个el-table绑定了数据源之后就可以通过类似v-model="bcglXiangXiList[scope.row.xh-1].ts"这种来进行动态数据绑定。实现新增一行新增按钮<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>在新增按钮对应的点击事件中 handleAddDetails() { if (this.bcglXiangXiList == undefined) { this.bcglXiangXiList = new Array(); } let obj = {}; obj.ts = "1"; obj.dkdd = "1"; obj.sjfw = ["07:00","07:30"]; obj.jxsjfw = ["06:00","12:00"]; this.bcglXiangXiList.push(obj); },前面先对数据源进行判断是不是undefined，因为在清空时会将其设置为undefined，所以需要重新新建。然后构建一个对象并赋值。将此对象添加进数据源bcglXiangXiList即可。实现删除一行前面已经对其勾选事件进行了重写，在勾选后将勾选的内容存储到了checkedDetail所以在删除前判断是否选中了一行就可以通过判断其长度即可。删除一行按钮<el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails" >删除</el-button>然后在删除按钮对应的事件中handleDeleteDetails() { if (this.checkedDetail.length == 0) { this.$alert("请先选择要删除的数据", "提示", { confirmButtonText: "确定", }); } else { this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1); } },这里首先判断是否已经选择了一行，如果选择了一行之后,就可以通过存储的选中项的this.checkedDetail[0].xh -1获取当前行的index，而这个index正好与数据源中的index是想对应的。然后将此条数据在数据源中去掉即可实现删除一行。其中splice方法是表示从第一个索引参数开始，删除第二个参数个元素。清空所有行清空按钮< el - button type = "danger" icon = "el-icon-delete" size = "mini" @click = "handleDeleteAllDetails" > 清空 < /el-button>清空按钮对应的事件中handleDeleteAllDetails() { this.bcglXiangXiList = undefined; },将数据源设置为undefined即可。
-
el-upload实现图片上传、回显及修改 场景先说一下适用场景吧。单据只能上传一张图片，图片上传完成后，在当前界面显示，并隐藏掉上传按钮。再次打开单据时，可以查看已经上传的图片，同时可以对已经上传的图片进行修改，修改的上传也是只能上传一张图片。前端代码<template> <!-- 添加或修改医疗机构登记对话框 --> <el-dialog :title="title" :visible.sync="open" width="60%" height="60%" :close-on-click-modal="false" :close-on-press-escape="false" show-close append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="12" v-if="form.vehicleNumber !== 0"> <el-form-item label="车辆编号" prop="vehicleNumber"> <el-input v-model="form.vehicleNumber" placeholder="请输入车辆编号" maxlength="32" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="车辆型号" prop="vehicleModel"> <el-input v-model="form.vehicleModel" placeholder="请输入医疗机构车辆型号" maxlength="128" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="车牌" prop="licence"> <el-input v-model="form.licence" placeholder="请输入车牌" maxlength="10" @blur="licenceUpper" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="购置日期" prop="acquisitionDate"> <el-date-picker format="yyyy-MM-dd" style="width:100%" value-format="yyyy-MM-dd" clearable v-model="form.acquisitionDate" placeholder="请选择购置日期" show-word-limit></el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="驾驶员" prop="driver"> <el-input v-model="form.driver" placeholder="请输入驾驶员" maxlength="32" show-word-limit/> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" maxlength="512" show-word-limit/> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="车辆图片"> <el-upload action="#" list-type="picture-card" ref="upload" :auto-upload="true" :multiple="false" accept="image/png, image/jpeg" :before-upload="onBeforeUpload" :http-request="uploadFile" :on-success="onSuccess" :on-change="onChange" :class="{hide:hideUpload}" :file-list="fileList"> <i slot="default" class="el-icon-plus" v-if="!disabled"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-dialog> </template> <script> import { addVehicle, updateVehicle, getVehicle } from '@/api/servicePlatform/basicData/vehicle' import { fileUpload } from '@/api/public/attachment' export default { name: 'detail', props: ['open', 'title', 'selectedVehicle'], data: function() { return { // 表单参数 form: {}, // 表单校验 rules: { vehicleNumber: [ { required: true, message: '请输入车辆编号', trigger: 'blur' } ], vehicleModel: [ { required: true, message: '请输入医疗机构车辆型号', trigger: 'blur' } ], licence: [ { required: true, message: '请输入车牌', trigger: 'blur' } ], acquisitionDate: [ { required: true, message: '请选择购置日期', trigger: 'blur' } ], driver: [ { required: true, message: '请输入驾驶员', trigger: 'blur' } ] }, dialogImageUrl: '', dialogVisible: false, disabled: false, fileList: [], hideUpload: false, limitCount: 1, selectedCount: 0 } }, methods: { /** 提交按钮 */ submitForm: function() { this.$refs['form'].validate(valid => { if (valid) { if (this.form.vehicleId != undefined) { updateVehicle(this.form).then(response => { this.msgSuccess('修改成功') this.$emit('getList') }) } else { addVehicle(this.form).then(response => { this.msgSuccess('新增成功') this.$emit('getList') }) } } }) }, //取消 cancel: function() { this.$emit('cancel') }, licenceUpper: function(val) { if (this.form.licence !== undefined) { this.form.licence = this.form.licence.toUpperCase() } }, //删除 handleRemove(file) { this.selectedCount-- this.hideUpload = file.length >= this.limitCount this.$refs.upload.clearFiles() }, //预览 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, //下载 handleDownload(file) { const a = document.createElement('a') const event = new MouseEvent('click') a.download = file.name a.href = file.url a.dispatchEvent(event) console.log(file) }, //上传前校验 onBeforeUpload(file) { const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' const isLt1M = file.size / 1024 / 1024 < 1 if (!isIMAGE) { this.$message.error('上传文件只能是图片格式!') } if (!isLt1M) { this.$message.error('上传文件大小不能超过 1MB!') } return isIMAGE && isLt1M }, onChange: function(file) { debugger this.fileList = [] this.fileList.push(file) this.selectedCount++ this.hideUpload = this.selectedCount >= this.limitCount }, handleUpload: function() { this.$refs.upload.submit() }, //上传附件 uploadFile(param) { fileUpload(param).then(res => { debugger if (res.code === 200) { this.form.photo = res.attachmentId } else { this.$message({ showClose: true, message: res.msg, type: 'error' }) } }).catch((error) => { this.$message({ showClose: true, message: error, type: 'error' }) }) }, beforeUpload(file) { }, //上传成功 onSuccess: function(response, file, fileList) { } }, created() { if (this.selectedVehicle !== undefined && this.selectedVehicle !== null && this.selectedVehicle.vehicleId !== undefined) { getVehicle(this.selectedVehicle.vehicleId).then(response => { this.form = response.data this.dialogImageUrl = response.data.url let obj = new Object() obj.url = response.data.url this.fileList.push(obj) }) } } } </script> <style> .hide .el-upload--picture-card { display: none; } </style>
-
element ui之el-select选择控件使用一些说明的 这会是一片持续更新的博文，主要记载使用elementui的日期控件el-date-picker的一些问题或者奇技淫巧。对选禁止换行el-select支持多选操作，但是在使用过程中，如果用户选择的元素比较多，会导致el-select的内容换行显示，影响美观。针对这个问题，我们有两种解决方案，但是都各有缺点。1.通过覆盖样式解决通过样式覆盖的方式解决，是相对来说比较好的一种方式。通过覆盖elementui的样式，禁止换行。在style中，增加如下css（不能在scoped中添加，在scoped中写不会生效）.el-select__tags { flex-wrap: nowrap; overflow: hidden; }这种方式的缺点是多余的内容不会显示。2.通过collapse-tags属性合并内容collapse-tag是el-select自带的一个属性。当选择多个元素时，只显示第一个元素，后面的元素显示1⃣️2⃣️3⃣️...这种格式。这种方式虽然解决了换行的问题，但是只能显示第一个元素，显示效果不如第一种方式。
-
element ui之el-date-picker日期控件使用一些说明 这会是一片持续更新的博文，主要记载使用elementui的日期控件el-date-picker的一些问题或者奇技淫巧。实际日期比选择日期早一天的问题这个是由于element-ui中时间控件的默认时间为国际标准时间，因此与北京时间差8个小时。解决方法也很简单，增加value-format="yyyy-MM-dd"即可。比如：<el-date-picker v-model="destoryApplyResultVO.applyTime" style="width: 100%" type="date" placeholder="选择申请日期" value-format="yyyy-MM-dd"> </el-date-picker>日期校验实际业务开发中，我们可能会涉及开始日期、结束日期这种数据，一般情况下，开始日期是不能晚于结束日期的，对于这种日期类型的校验，我们可以通过rules实现。<script> export default { name: 'detail', data() { const checkDate = (rule, value, callback) => { if (new Date(this.destoryApplyResultVO.applyTime) > new Date(this.destoryApplyResultVO.checkTime)) { callback(new Error('申请日期不能晚于核对日期')) } else { callback() } } return { rules: { applyTime: [ { required: true, message: '请选择申请日期', trigger: ['blur', 'change'] }, { validator: checkDate, trigger: ['blur', 'change'] } ] }, } }, methods: { //确定 handleSave: function() { this.$refs['destoryApplyResultVO'].validate((valid) => { if (valid) { //业务代码 } }) } } } </script>
-
Vue非父子组件通信 在父组件向子组件传递数据及子组件调动父组件自定义事件我们介绍了父子组件之间的传值方式。除了父子组件之间传值，我们还可能涉及非父子组件之间的传值。下面我们介绍两种非父子组件通信的方式。一、EventBus 实现非父子组件通信通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )。1.建立bus.js母线import Vue from 'vue' const bus = new Vue() export default bus2.建立根组件(root.vue)，引入两个同级的组件<template> <div> <component-a></component-a> <component-b></component-b> </div> </template> <script> import componentA from './componentA' import componentB from './componentB' export default { name: 'root', components: {componentB, componentA}, data () { return {} } } </script> <style> </style>3.建立组件A(componentA.vue)<template> <el-form> <el-form-item label="A组件" label-width="80px"> <el-input v-model="msg"/> </el-form-item> <el-form-item> <el-button type="primary" @click="emit">将数据传递到B组件</el-button> </el-form-item> </el-form> </template> <script> import bus from './bus' export default { name: 'componentA', data () { return { msg: '' } }, methods: { emit: function () { bus.$emit('showMsg', this.msg) } } } </script> <style> </style>4.建立组件B(componentB.vue)<template> <el-form label-width="80px"> <el-form-item label="B组件"> <el-input v-model="receiveMsg"></el-input> </el-form-item> </el-form> </template> <script> import bus from './bus' export default { name: 'componentB', data () { return { receiveMsg: '' } }, created () { bus.$on('showMsg', value => { this.receiveMsg = value }) } } </script> <style> </style>二、$.root 实现非父子组件通信1.建立根组件(root.vue)，引入两个同级的组件<template> <div> <component-a></component-a> <component-b></component-b> </div> </template> <script> import componentA from './componentA' import componentB from './componentB' export default { name: 'root', components: {componentB, componentA}, data () { return {} } } </script> <style> </style>2.建立组件A(componentA.vue)<template> <el-form> <el-form-item label="A组件" label-width="80px"> <el-input v-model="msg"/> </el-form-item> <el-form-item> <el-button type="primary" @click="emit">将数据传递到B组件</el-button> </el-form-item> </el-form> </template> <script> export default { name: 'componentA', data () { return { msg: '' } }, methods: { emit: function () { this.$root.$emit('showMsg', this.msg) } } } </script> <style> </style>3.建立组件B(componentB.vue)<template> <el-form label-width="80px"> <el-form-item label="B组件"> <el-input v-model="receiveMsg"></el-input> </el-form-item> </el-form> </template> <script> export default { name: 'componentB', data () { return { receiveMsg: '' } }, created () { this.$root.$on('showMsg', value => { this.receiveMsg = value }) } } </script> <style> </style>这种方式，可以省略掉bus的定义，只需要把代码中的bus替换成this.$root即可
-
vue父子组件的单向数据流 vue 2.x与1.x关于数据流向的区别在1.x中，可以通过.sync实现数据的双向绑定。在Vue 2.x中，为了组件的解耦，通过props传递给子组件的值是单向的。如果我们需要修改父组件传递的数据，我们可以将props的值赋值到data中，然后修改data中的值。数据流向真的是单向的吗？那么在Vue 2.x中数据的流向真的是单向的吗？我们看下下面的Demo对象、数组类型数据流向新建两个组件，父组件（parent.vue）及子组件（child.vue），两个组件内容都比较简单。父组件里面展示子组件的内容，父组件通过toChild属性，将自己一个对象数据传递到子组件。子组件接收到父组件传递的值后，存储到data中的toParentC中，然后修改toParentC的值。父组件parent.vue<template> <div> <p> 这是父组件 </p> <el-input v-model="toChild.name" placeholder="传递给子组件的值"></el-input> <child :toChild="toChild"></child> </div> </template> <script> import child from './child' export default { name: 'parent', components: {child}, data () { return { toChild: { name: '张三' } } } } </script>子组件child.vue<template> <div> <p>这是子组件</p> <el-input v-model="this.toChild.name" placeholder="我是从子组件获取的值"/> <el-input v-model="toParent.name"></el-input> <el-button type="primary" @click="toParentC">返给父组件</el-button> </div> </template> <script> export default { name: 'child', props: ['toChild'], data () { return { toParent: '' } }, methods: { toParentC: function () { }, }, created () { this.toParent = this.toChild }, } </script>按照我们上面的说法，数据是单向流转的，那么我们在修改toParentC值时，父组件的值应该是不会改变的，那么到底会不会改变呢，我们运行工程验证一下。纳尼，父组件的值还是改变了。why？
-
vue工程关闭eslint严格语法检查 什么是eslinteslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。其实eslint本身是一个好东西，能够检查我们代码中的语法错误、规范我们的书写风格，但是水至清则无鱼，eslint的框框太死了（其实我是没怎么用过），所以，我们一般情况下，将eslint关闭就好了，一劳永逸。eslint的严格校验eslint会规范缩进、空格、空白行之类的代码，在开发过程中一直报错，未免太过于苛刻了。所以，我还是会选择关闭eslint校验。比如，我们对象中多了一个,，本身不是太大的问题，但是eslint就会报错。诸如此类的问题，肯定会让我们开发人员抓狂。关闭eslint校验1. 利用脚手架创建工程时关闭我们在创建vue工程时，会提示我们是否开启eslint，如果我们不需要使用，关闭即可。2. 已开启eslint的工程关闭如果我们打开的是别人的工程，或者在创建工程时，不小心开启了eslint，我们也可以修改已有工程，关闭eslint。关闭方法如下：找到工程build文件下的webpack.base.conf.js文件，注释掉createLintingRule()
-
父组件向子组件传递数据及子组件调动父组件自定义事件 在vue中，我们基于组件进行开发，一个复杂的页面，我们一般会放到多个component中，多个component之间就会涉及到数据交互的问题。父组件传递数据到子组件从父组件传递数据到子组件还是比较简单的，通过属性传递过去即可。父组件设置:子组件的属性=‘需要传递的数据’子组件接收数据props: ['属性名']没什么特别的地方，只是需要说明的事，因为通过属性传递过去的，所以在子组件中，不能直接修改传递的数据，如果需要修改需要，需要将属性值传递到data中，通过data进行修改。子组件触发父组件方法子组件触发父组件的方法，与值传递类似。只是传递的不再是数据，而是一个方法。父组件设置@子组件需要触发的方法=父组件的方法(参数)子组件设置子组件通过this.$emit(‘子组件需要触发的方法’,参数)即可调用父组件的方法，同时可以传递数据。demo演示<template> <div> <p> 这是父组件 </p> <el-input v-model="fromChild" placeholder="我是从子组件获取的值" /> <el-input v-model="toChild" placeholder="传递给子组件的值"></el-input> <child :toChild="toChild" @fromC="fromChildMethod($event)"></child> </div> </template> <script> import child from './child' export default { name: 'parent', components: {child}, data () { return { toChild: '', fromChild: '' } }, methods: { fromChildMethod: function (val) { debugger this.fromChild = val } } } </script> <template> <div> <p> 这是子组件 </p> <el-input v-model="this.toChild" placeholder="我是从子组件获取的值"/> <el-input v-model="toParent"></el-input> <el-button type="primary" @click="toParentC">返给父组件</el-button> </div> </template> <script> export default { name: 'child', props: ['toChild'], data () { return { toParent: '' } }, methods: { toParentC: function () { this.$emit('fromC', this.toParent) } } } </script>
