搜索到
629
篇与
的结果
-
-
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>
-
自建ngrok服务器，实现树莓派内网穿透 {mtitle title="一、前言"/}最近买了个树莓派4b 8g版本的，想着当作个人网盘使用。正好平时开发用的MySQL、nginx、redis等软件也可以放到树莓派上面跑了。{mtitle title="二、准备材料"/}服务器，用来搭建ngrok的服务器，必须有公网IP能正常访问。我用的是centos7.5域名，用来做映射。两个条件缺一不可。如何无法满足上述条件，只能去买别人搭建好的了，但是费用也不低。某网的是10元/月，但是现在腾讯云搞活动，云服务器平均一个月最低才7.3，而且不限制老用户。我其实也是今天薅了个羊毛。{mtitle title="三、搭建"/}配置域名比如我用lisen.me做映射，那么必须要配置好lisen.me还有*.lisen.me，将域名指向公网IP。安装git和Golang这个比较简单，直接执行下面的命令即可apt-get install build-essential golang mercurial git下载源码此处使用非官方地址，修复了部分包无法获取git clone https://github.com/tutumcloud/ngrok.git ngrok生成签名证书使用ngrok.com官方服务时，我们使用的是官方的SSL证书。自建ngrokd服务，如果不想买SSL证书，我们需要生成自己的自签名证书，并编译一个携带该证书的ngrok客户端。cd ngrok NGROK_DOMAIN="lisen.me" openssl genrsa -out base.key 2048 openssl req -new -x509 -nodes -key base.key -days 10000 -subj "/CN=$NGROK_DOMAIN" -out base.pem openssl genrsa -out server.key 2048 openssl req -new -key server.key -subj "/CN=$NGROK_DOMAIN" -out server.csr openssl x509 -req -in server.csr -CA base.pem -CAkey base.key -CAcreateserial -days 10000 -out server.crt注意替换域名：将lisen.me替换成自己的域名替换默认证书执行完成后需要替换证书cp base.pem assets/client/tls/ngrokroot.crt执行完命令后，会提示是否覆盖，输入y回车即可。编译服务端make release-server release-client运行服务端编译成功后会在bin目录下找到ngrokd和ngrok这两个文件。其中ngrokd 就是服务端程序了。./bin/ngrokd -tlsKey=server.key -tlsCrt=server.crt -domain="lisen.me" -httpAddr=":80" -httpsAddr=":443"注意替换域名httpAddr、httpsAddr 分别是 ngrok 用来转发 http、https 服务的端口，可以随意指定。ngrokd 还会开一个 4443 端口用来跟客户端通讯（可通过 -tunnelAddr=”:xxx” 指定）。编译客户端不同客户端编译方法不一样，我这里只介绍win和树莓派的8.1 windows 64位GOOS=windows GOARCH=amd64 make release-client 8.2 树莓派GOOS=linux GOARCH=arm make release-client执行对应的命令会在bin目录下生成相对应的windows和linux_arm的目录，客户端分别放到两个目录中。下载客户端到要穿透的电脑并配置因为我使用树莓派运行，所以下载linux_arm目录下的ngrok，然后上传到树莓派系统。配置客户端在ngrok同级目录创建文件ngrok.cfg，并配置信息，我配置的比较多，按需配置即可 server_addr: lisen.me:4443 trust_host_root_certs: false tunnels: weixin: subdomain: www proto: http: 80 about: subdomain: seafile proto: http: 8000 ssh: remote_port: 222 proto: tcp: 22 vnc: remote_port: 5900 proto: tcp: 5900 mysql: remote_port: 3306 proto: tcp: 3306 redis: remote_port: 6379 proto: tcp: 6379采用严格的单空格缩进，可以代理其他主机，直接跟端口默认是本主机，还要注意防火墙的配置。运行客户端./ngrok -config ngrok.cfg start-all启动后出现online字样说明内网穿透成功。{mtitle title="四、配置服务端开机自启"/}思路很简单，就是在/etc/systemd/system/目录下创建一个叫做ngrok.service的文件，然后写入一下代码:[Unit] Description=ngrok After=network.target [Service] Type=simple ExecStart=/usr/bin/ngrok/bin/ngrokd -tlsKey=/usr/bin/ngrok/server.key -tlsCrt=/usr/bin/ngrok/server.crt -domain="lisen.me" -httpAddr=:80 -httpsAddr=:443 > /dev/null 2>&1 & [Install] WantedBy=multi-user.target这样的话系统就会把我们的脚本识别为服务，然后我们就可以用systemctl这个工具来轻松管理ngrok的运行与启动。运行ngroksystemctl start ngrok查询ngrok状态systemctl status ngrok实现开机启动systemctl enable ngrok{mtitle title="五、配置客户端开机自启"/}思路很简单，就是在/etc/systemd/system/目录下创建一个叫做ngrok.service的文件，然后写入一下代码:[Unit] Description=ngrok After=network.target [Service] Type=simple ExecStart=/home/pi/ngrok/ngrok -config /home/pi/ngrok/ngrok.cfg start-all [Install] WantedBy=multi-user.target这样的话系统就会把我们的脚本识别为服务，然后我们就可以用systemctl这个工具来轻松管理ngrok的运行与启动。运行ngroksystemctl start ngrok查询ngrok状态systemctl status ngrok实现开机启动systemctl enable ngrok
-
-
seafile：搭建自己私有的在线网盘（同步盘） {mtitle title="为什么搭建私有的网盘"/} 因为我自己需求的特殊性吧，在公室用Win撸代码，回家用Mac撸代码。两边来回折腾，我自己又不想背着电脑到处跑。所以，网盘变成了不二的选择。 之前在用iCloud以及onedrive，还用过几天坚果网盘，但是都有问题。其实我存储东西不是很大（2、3个G），但是文件比较多，大概有15w左右。icloud 苹果官方出品，之前存储一些小的个人资料，也一直在用。而且花钱买的一个月50G空间（一个月6块钱）。iCloud在Mac下面体验很好，但是到了Win下面，体验真是一言难尽呐。也许是文件太多，一开始每秒大概能下载5个文件，后来下载到5w左右，基本上就不下载了。onedrive onedrive说实在的在跨平台的体验上，比iCloud要好不少，在Mac以及Win上面体验都还不错，但是onedrive免费空间只有5G，双11通过红包花了一块钱买了那个邀请扩展空间的，所以空间达到了15G。之所以放弃onedrive基于以下原因：出现过文件文件不同步的问题，但是Mac上有些文件，同步到Win的时候，发现文件没有同步成功，也没啥提示。手机以及ipad端app存在问题，文件明明已经同步到服务端，但是手机或者ipad上面的app就是看不到，必须搜索一下才能看到。关于费用，本来有一个15元/月的100G空间，但是一直不能购买，挂上梯子也一直提示404，不知道啥原因。web端被墙了，所以网页是无法打开的。坚果网盘 坚果云我感觉我自己没啥发言权，毕竟没深度用过，这里就说一下放弃原因吧，坚果云免费版好像是没有空间限制的（我不确定，没超过）。专业版年付是199.90，月付30.00，价格说实在的不便宜。快赶上买ondrive套件的了。{mtitle title="二、搭建私有网盘准备工作"/} 既然要搭建私有云盘，肯定是要有服务器的，服务器空间大小就看个人的使用情况了。我是用的腾讯云的1核2G的，磁盘是50G。另外里面还挂着个人的博客。整体使用下来没感觉到有卡顿现象。另外如果想域名访问，肯定还是需要一个域名的（国内需要备份）。 其实，我感觉完全可以买个树莓派，然后找个内网穿透工具，放到家里面。{mtitle title="三、seafile网盘搭建方法"/}seafile介绍 Seafile 云是由 Seafile 官方提供的 SaaS 服务，你只需要注册一个账号，即可在云上使用多终端文件同步、协作共享、Office 文档在线编辑、全文检索、知识管理等 Seafile 企业版功能。seafile安装本文基于centos7安装。下载到下载页面下载最新的服务器安装包。部署和目录设计假设你已经下载 seafile-server_* 到/opt/seafile目录下。 我们建议这样的目录结构:mkdir /opt/seafile mv seafile-server_* /opt/seafile cd /opt/seafile #将 seafile-server_* 移动到 seafile 目录下后 tar -xzf seafile-server_* mkdir installed mv seafile-server_* installed现在，你的目录看起来应该像这样：#tree seafile -L 2 haiwen ├── installed │ └── seafile-server_7.0.0_x86-64.tar.gz └── seafile-server-7.0.0 ├── reset-admin.sh ├── runtime ├── seafile ├── seafile.sh ├── seahub ├── seahub.sh ├── setup-seafile-mysql.sh └── upgrade这样设计目录的好处在于：和 seafile 相关的配置文件都可以放在 /opt/seafile/conf 目录下，便于集中管理。后续升级时,你只需要解压最新的安装包到 /opt/seafile 目录下。安装 Seafile 服务器安装前的准备工作 安装 Seafile 服务器之前，需要安装mysql，因为我本身博客在这个服务器上，安装的lnmp，所以服务器上已经安装了mysql，请确认已安装以下软件:Seafile 7.0.x 版本# on Ubuntu 16.04 apt-get update apt-get install python2.7 python-setuptools python-mysqldb python-urllib3 python-ldap -yon CentOS 7yum install python python-setuptools MySQL-python python-urllib3 python-ldap -ySeafile 7.1.x 版本# on Debian 10/Ubuntu 18.04 apt-get update apt-get install python3 python3-setuptools python3-pip python3-ldap -y pip3 install --timeout=3600 Pillow pylibmc captcha jinja2 sqlalchemy psd-tools \ django-pylibmc django-simple-captchaon CentOS 8yum install python3 python3-setuptools python3-pip python3-ldap -y pip3 install --timeout=3600 Pillow pylibmc captcha jinja2 sqlalchemy psd-tools \ django-pylibmc django-simple-captcha安装cd seafile-server-* ./setup-seafile-mysql.sh #运行安装脚本并回答预设问题 如果你的系统中没有安装上面的某个软件，那么 Seafile初始化脚本会提醒你安装相应的软件包。该脚本会依次询问你一些问题，从而一步步引导你配置 Seafile 的各项参数：在这里, 你会被要求选择一种创建 Seafile 数据库的方式： ------------------------------------------------------- Please choose a way to initialize seafile databases: ------------------------------------------------------- [1] Create new ccnet/seafile/seahub databases [2] Use existing ccnet/seafile/seahub databases如果选择1, 你需要提供根密码. 脚本程序会创建数据库和用户。如果选择2, ccnet/seafile/seahub 数据库应该已经被你（或者其他人）提前创建。如果安装正确完成，你会看到下面这样的输出 (新版本可能会有所不同)启动 Seafile 服务器启动 Seafile 服务器和 Seahub 网站在 seafile-server-latest 目录下，运行如下命令启动 Seafile:./seafile.sh start # 启动 Seafile 服务启动 Seahub./seahub.sh start # 启动 Seahub 网站 （默认运行在127.0.0.1:8000端口上） 你第一次启动 seahub 时，seahub.sh 脚本会提示你创建一个 seafile 管理员帐号。注意：7.0.x 版本之后，8000端口默认监听在127.0.0.1地址上，这意味着您无法直接通过8000端口访问Seafile服务。 恭喜! 现在你已经成功的安装了 Seafile 服务器.
-
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即可
-
2020.2 IntelliJ IDEA激活-已解决27号过期问题 最新2020.11.26激活再次失效，请参考2020.2 IntelliJ IDEA激活-已解决11月26号过期问题 - 香草物语 (lisen.cc)在最新idea202.02激活教程有效期到2089中，我们介绍了jetbrains家族的2020.2版本的激活方法。但是本月27号（2020年10月27日），激活突然失效了。这篇文章我们介绍的是最新的激活方式，可以解决27号过期的问题。激活方法不变，只需要下载新的破解文件并替换安装参数即可。获取破解文件https://pan.baidu.com/s/1jjR5_2Flp4YEp5WZS1yjrQ 提取码: eema使用方法先下载压缩包解压后得到jetbrains-agent-latest.zip，把它放到你认为合适的文件夹内。启动你的IDE，如果上来就需要注册，选择：试用（Evaluate for free）进入IDE拖动jetbrains-agent-latest.zip到编辑器里面选择resart输入安装参数激活成功安装参数[copy]HbVMaxqQrTt4UvDUk8fhyFT7uRdv48bqJsQMwVFp53YH9PZC9l+ZxAgnA60cLwwhURw/e4DcZZtle4tQzur4yWRk35qghES4JLFlmKty/UNiYh6RZyXeCNPTCvIqxT9HR2YKqQT93be6AfLTcbJwPSLO201g+HbMbg6+aK1MUJI[/copy]
-
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>
