
vue
文章平均质量分 50
ZXH0122
越努力越幸运,加油!
展开
-
vue中组件的props属性
> props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。问题一:那props具体是怎么使用呢?原理又是什么呢?往下看1、【定义被调用组件】首先,我们先定义一个person组件,用于显示个人信息的组件,我们放了一个人的姓名,性别,以及年龄,定义好这个组件之后,就可以等待其他组件进行调用。那么既然别的组件可以调用,我们就需要再定义一个props属性,用于接收别的组件传进来的值。注意:组件中name、sex、age都是一个...转载 2022-03-10 10:01:17 · 730 阅读 · 0 评论 -
浅析vue中的provide / inject 有什么用处
1.前言vue的父子组件通信用什么?:prop和$emit的组合。如果是爷孙组件呢?:那么就要用父组件来转发数据和事件了。如果是太爷爷和孙子组件呢?:当然是vuex啦不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父子,中间隔了多少级都可以)通信问题的最好解决方案啦!2.官方文档拿过来的介绍这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并原创 2022-03-07 09:27:03 · 392 阅读 · 0 评论 -
什么时候用 v-if, 什么用 v-show?
什么时候用v-if,什么用 v-show!原创 2021-12-03 10:21:32 · 662 阅读 · 0 评论 -
Vue 常见问题汇总及解决方案
Vue 常见问题汇总及解决方案原创 2021-12-02 18:28:33 · 794 阅读 · 1 评论 -
图片预览正确的打开方式 vue-vant中ImagePreview
在使用vue的过程中,vant在移动端的地位还是很高的,本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果,获取图片索引,点击哪一张就预览哪一张一、效果图如下二、实现步骤,分为3步1、局部注册ImagePreviewimport { ImagePreview } from "vant";2、创建处理函数open,执行imagepreview函数关键参数:图片数组、图片索引、是否可关闭3、点击图片调用open函数预览效果在vant中 ImagePreview 图原创 2021-11-26 18:09:15 · 1876 阅读 · 0 评论 -
在vue中使用qrcode生成二维码
作用:QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。本文主要 描述 toCanvas 方法使用 :安装yarn add qrcode导入import qrcode from ‘qrcode’定义一个canvas标签放二维码生成qrcode.toCanvas(canvasElement, text, [options], [cb(error)])canvasElemen转载 2021-11-25 09:55:20 · 1147 阅读 · 0 评论 -
vue 中新窗口打开vue页面 【this.$router.resolve】
1.router.js内写跳转的新页面的路由2.在点击跳转的事件内写outsideLink () { let {href}= this.$router.resolve({ path: "/newLinkPage", }); window.open(href, '_blank');}原文链接:https://www.cnblogs.com/chr506029589/p/13577339.html作者:橙子不是orange...原创 2021-11-19 11:17:18 · 1045 阅读 · 0 评论 -
Vuex(点击事件加减案列)的使用
1.在src目录下创建一个store文件夹,在创建一个index.js2.在main.js里面 import store from ‘./store/index.js’将store注入进(为了使每个页面可以使用this.$store去调用到store里面的信息)new Vue({store})3.例如一个点击事件来实现数量的加减案例4.使用mutations来实现5.在使用组件的页面添加的button事件6.组件页面使用methods来实现修改(将store里面的decrement递减转载 2021-09-16 15:53:28 · 523 阅读 · 0 评论 -
swiper禁止手动滑动
swiper禁止手动滑动只需要在最外层的容器上增加class=“swiper-no-swiping”(在引入了swiper相关css的前提下)原创 2021-09-14 16:38:07 · 1144 阅读 · 0 评论