xuxu_qkz的博客

1.组件传值父传子 props子传父 （子）通过事件 this.$emit('父事件'，参数) ； （父）父事件（）{ this.参数 = 参数 }2.非父子组件单独创建一个vue实例 bus,然后Vue.prototype.$bus = Bus; 暴露到全局组件1触发：this.$bus.emit('事件名', 参数);组件2接收： this.$bus.on('事件名'，（

require.context 用法，巧妙引入文件const modules1 = {}const modules2 = {}# 只获取子文件夹下的index文件 ./xxx/index.jslet files = require.context('./', true, /^\.\/(\w*\/)+index\.js$/, 'lazy')# 获取当前目录下的js文件 ./xxx.js...

数据格式化方法treeTable/dataTranslate.jsimport Vue from 'vue'function DataTransfer (data) { if (!(this instanceof DataTransfer)) { return new DataTransfer(data, null, null) }}DataTransfer.tree...

vue 组件传参func用法使用场景：比如一个button组件里面有一个loading属性，在父组件中如何去改变loading的值，一种是通过props去改变，另外一种可以通过func暴露整个组件对象来实现。button.vue <button @click="handleClick"><button>props:{ funcProps: {...

Vue v2.4中 新增的$attrs及$listeners属性用于跨级组件传值$attrs–继承所有的父组件属性（除了prop传递的属性、class 和 style ）inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是c...

关于vue slot 的多级传递使用 关于slot 以及scope-slot的基本使用，官方文档已经有了详细的介绍：点击这里查看，这里就不复述了。但是在实际的使用过程中，常常会出现外部组件内容需要多级嵌套传递到目标组件，那么slot可以如何实现呢？ 现在假设有A，B，C三个组件，层级关系为A>B>C(爷爷，父亲，儿子)C:<div> C组...

el-dialog el-tabs结合 样式改造效果： dialog.vue (封装好的组件)<template> <div> <el-dialog :visible.sync="dialogVisibles" class="theme1" @close="$emit('update:show', false)"> &

css 彩色按钮common.scss$blue: #48b0f7;$light-blue:#3A71A8;$red:#C03639;$pink: #E65D6E;$green: #30B08F;$tiffany: #4AB7BD;$yellow:#FEC171;$panGreen: #30B08F;@mixin colorBtn($color) { backgr...

DropdownMenu排好队，一个一个来 component / dropdownMenu.vue<template> <div class="share-dropdown-menu"> <span class="share-dropdown-menu-title" @click.self="clickTitle">{{title..

element 指令waves作用：点击当前元素触发水波纹效果directives / waves / waves.css.waves-ripple { position: absolute; border-radius: 100%; background-color: rgba(0, 0, 0, 0.15); background-clip: padd...

element 隐藏指令clickoutsde改造该指令是在element 源码的指令clickoutsde的基础上改造的作用：点击绑定指令的当前元素的外部生效触发事件directives / clickoutsde.js// 引入Vue用以判断当前运行环境import Vue from 'vue'// element封装的一些常用dom操作，这里on可以先当做是addE...

<el-table :data="tableData" v-loading="loading" :height="height" style="width: 100%;" :row-key="getRowKeys" @row-click="rowClick" @expand-change=&q

&amp;lt;template&amp;gt;&amp;lt;div&amp;gt; &amp;lt;el-input v-model=&quot;search&quot; placeholder=&quot;请输入内容&quot;&amp;gt;&amp;lt;/el-input&amp;gt; &amp;lt;el-table :data=&quot;tables.sl

&amp;lt;template&amp;gt; &amp;lt;div class=&quot;box&quot;&amp;gt; &amp;lt;el-input v-model=&quot;search&quot; placeholder=&quot;请输入内容&quot;&amp;gt;&amp;lt;/el-input&amp;gt; &amp;lt;el-t

vue中echarts随窗口变化响应utilsexport function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date(...

首先，我们常见的html标签是这样的：&lt;div&gt;这里是内容&lt;/div&gt;vue中的组件使用跟html标签是非常类似的，那么可不可以这样写呢？？&lt;DataTablePage&gt;这里是插入的内容&lt;/DataTablePage&gt;毫无疑问，当然是可以的，只需要在子组件中加入slot&lt;template&gt; &lt;...

什么是柯里化？ 柯里化是指将使用多个参数的函数转换成一系列使用一个参数的函数的技术。从而达到函数只运行一次的效果。/** * 事件柯里化，只执行一次 */export const on = (function () { if (document.addEventListener) { return function (elem, type, fn, capture) {

//人民币小写转大写export function rmb (num) { const numArray = num.split('.') const numList = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'] const radiceList = ['', '拾', '佰', '仟'] const unitList ...

vue elmentui table 滚动加载