vue
文章平均质量分 61
一个写前端的
一个写前端的
展开
-
vue3.0下如何使用mapState,mapGetters和mapActions
vue3.0下如何使用mapState,mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用vue2.0中使用mapState及mapActions的方式// 使用mapStatecomputed: { ...mapState({ //... }) }methods: { ...mapActions(['fnA', 'fnB'])}vue3.原创 2021-08-26 17:39:56 · 11371 阅读 · 10 评论 -
九宫格抽奖代码实现
转盘抽奖demo核心代码class Lottery { constructor(domId) { this.prizeIndexArr = [0, 1, 2, 5, 8, 7, 6, 3] // 顺时针转动对应的奖品序号 this.maxStep = this.prizeIndexArr.length * 5 // 最大滚动的格子数 this.currentIndex = -1 // 当前滚动到的格子的index this.ste原创 2021-02-03 15:41:29 · 1887 阅读 · 0 评论 -
vue函数式组件在实际业务场景下的具体应用(高级/简易搜索组件实现)
在上一篇文章中,我大致的讲了vue函数式组件的简单使用,那这篇文章,我将给大家具体讲一讲vue函数式组件在实际业务场景下的具体应用。如上图,做过后台内容管理平台的同学都知道,这个搜索栏是肯定需要的,实现这个功能的方法有很多种,每个人实现的方式肯定也会存在不同的地方,毕竟一千个人有一千个哈姆雷特嘛!既然本文是讲函数式组件的实际应用,那我实现这个功能的方法肯定也是跟函数式组件有关。下面我将细细讲解。1、首先,我们创建renderComponent.js export default {原创 2020-05-13 15:26:26 · 1465 阅读 · 0 评论 -
vue中的函数式组件
用过react的同学都知道,函数式组件在react中的应用是很流行的,那如何在vue中使用函数式组件呢?什么是函数式组件熟悉react的同学应该都知道,react中的函数式组件其实就是一个接收一些prop的函数,然后返回HTML。vue的函数式组件也是如此。特点无状态:函数式组件本身是没有状态的,也就是没有响应式数据无实例:函数式组件没有实例,也就是没有this上下文写法export default { functional: true, // Props 是可选的 props原创 2020-05-12 22:09:48 · 3724 阅读 · 0 评论 -
vue + element二次封装更灵活的Select组件
vue + element二次封装更灵活,更易维护的Select组件前言select下拉框组件应该是我们在做项目时用的频率比较高的组件之一了,只要涉及到查询,就少不了select下拉框,本文将介绍如何基于vue + element封装一个灵活、易维护的select组件。1、新建select.vue下面是select组件的完整代码,里面的内容我将在下面做详解<template>...原创 2020-03-21 12:56:52 · 4689 阅读 · 0 评论 -
vue + element-ui二次封装Table组件,实现表格内容的完全自定义
vue + element-ui二次封装Table组件,实现表格内容的完全自定义前言我们在用vue + element-ui写后台管理系统项目时,table组件应该是用的频率非常高的组件之一,但是我们不希望每次都使用element-ui的表格代码,秉着代码可读性和可复用性的原则,我们需要对element的table组件进行二次封装。1、新建table.vue页面<template&g...原创 2020-03-20 17:10:01 · 8750 阅读 · 1 评论 -
vue组件间通信的几种方式
vue组件间的几种通信方式方法一、props/$emit1、父组件向子组件传值父组件中通过v-bind绑定需要给子组件传递的值,子组件中通过props拿到父组件传递的值//App.vue父组件<template> <div id="app"> <Child v-bind:username="username"/>//前者自定义名称便于子组件...原创 2019-10-16 14:04:04 · 211 阅读 · 0 评论