qq_44473483的博客

如果只更新父组件那么子组件不参与变更。如果只更新子组件那么父组件不参与变更。

什么是表单表格呢？简单来说就是在一个表格里面进行表单操作，执行增删改查。这在一些后台管理系统中是尤为常见的。今天我们根据 + 来设计一个表单表格组件。（不涉及完整代码，想要使用完整功能可以看底部连接）首先我们思考表格里面的表单元素应该如何实现。在用户使用的时候，我们希望用户传入一个指定的类型自动去匹配对应的表单组件。那我们就应该将所有类型做一个集成，并分别给他们一个类型名称。当然，为了最大程度为他们保留在已经实现的属性与方法，肯定接收的是一个对象，对象里面包含了他要展示的组件类型，一些原的属性方法，我们

vue组件跳层级时的事件处理 （事件的广播与派发）

v-model的介绍

解决select数据量过多造成的页面卡顿

手写hash版路由

Vue里面的虚拟DOM并非就比原生DOM快。

对于elementui里面的scrollbar组件，一直没有一个清晰的使用方法，似乎每次使用需要的代码都不同，需要加各种乱七八糟的样式加穿透样式，今天自己测试了下，似乎并没有想象的复杂。1.最简单的使用<template> <div> <el-scrollbar> <div class="box"> <ul> <li v-for="item in 100">{{ item

浅谈vue几个缺点1.不利于SEOSEO是Search Engine Optimization的缩写，意思是“搜索引擎优化”，搜索引擎的基础爬虫的原理就是抓取你的url，然后获取你的html源代码并解析。而vue里面的大部分数据是存在于js代码里面的，也就是说，如果一个单页应用，html在服务器端还没有渲染出所有数据，在浏览器才渲染出所有数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。2.首页白屏主要原因还是因为他是SPA的特性，会在首页的时候将所有的js、c

一.使用配套的element插件当你使用vue-cli3.0及以上创建项目时，element-ui其实是为其打造了一套专门的应用插件的，及其简单，无须过多操作，安装即可使用。1.按需引入组件当需要引用所有element组件时，只需要在你所创建的项目下，在同package.json文件的目录下打开控制台，输入vue add element即可。首先回提示你是否继续安装，直接回车即可（这一步是下载插件，如果不是第一次安装，有可能会没有该提示）? Still proceed? 下载完成后会询问你需

1.安装依赖npm i vue-print-nb2.挂载依赖Vue.use(Print) 3.包装元素<!-- 需要给外层包裹元素ref，在点击打印阶段需要使用ref获取打印元素，需要指定id用于捆绑触发打印的按钮 --><div ref="printTest" id="printTest"> 需要打印的数据</div>4.创建打印按钮<!-- v-print指令可以直接绑定到对应的打印区域--><el-button v-pr

在vue里，会出现很多文件引入的情况。常见的就是在router或者公共组件的引用，我们分别对这两种情况进行讨论，并提出优化方式。一.router文件的引入当我们的项目体系足够大时，将路由全都放在index.js文件是不优雅的，页面代码过于复杂会造成阅读和维护的困难。所以这个时候，我们一般采取分模块引用，一个模块对应一个js文件，里面存放对应的路由信息。但是当我们的模块足够多时，重复的文件引入对我们来说也是一个困扰，所以就可以使用动态引入。我们简单写几个文件为例。上面的文件除了index.js外分别对

单选element表格

问题今天项目出现问题，使用的是路由传参，第一次打开新增页面使用传参，传了参数1，此时1是为纯数字，也就是number类型，但是对页面进行刷新后发现数字1变成了string类型。原因百度了解到，原来，当刷新本页时，路由地址附带参数进行了一次刷新，页面在读取num时，当成字符串处理了。解决方法可以使用Number()方法强制转换为数字类型进行计算。解决方法可以使用Number()方法强制转换为数字类型进行计算。...

$attrs和$listeners我们都知道父子组件的通信可以使用props和$emit的方式，但是如果进行父子组件和孙子组件的通讯使用props和\$emit的话就比较复杂了，需要层层传递。而，$attrs和$listeners就减少了子组件的代码。所以在我看来，它并不是一种解决通讯的方法，只是一种打通父组件和孙组件之间的阻碍，让他们可以更好的使用props和$emit的手段。$attrs官方介绍：当父组件传数据给子组件的时候，如果子组件的props没有进行接收，那数据就会被收集到子组件的$at

provide / inject在vue里面，组件通讯是重中之重。好的通讯方式无疑让代码更加简洁优化，而provide / inject就是组件通讯的一种,可以实现父子组件，或父组件和后代组件的通讯。来看看官方的介绍：provide官方介绍：provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为key，但是只在原生支持 Symbol和 Reflect.ownKeys的环境下可工作。provid

this.$slots是vue里面的一个只读的api，用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。这个api在日常用的不多，今天一个项目里控制列的展示中看到了这个api，然后惊奇的发现，在子组件的created里面打印this.$slots是一个空对象（请以JSON.parse(JS

单独组件的生命相信大家都明白，但是当出现父子组件这种模式时，他们的生命周期又会出现什么问题呢？父组件<template> <div> <h3>我是父元素</h3> <Son></Son> </div></template><script>import Son from '@/components/Son.vue'export default { name: '

之前从没发现delete和Vue.delete有区别，今天在网上无意间刷到了，做个总结。delete和和Vue.delete都是对数组或对象进行删除的方法。这两种方法对于对象来说其实是没有区别的，使用方法会直接删除对象的属性（物理删除）。let obj = {name: 'fufu', age: 20}// delete obj.age => {name: 'fufu'}// Vue.delete(obj, 'age') => {name: 'fufu'}// 测试发现对于对

前言权限是一个后台管理系统最重要的要素之一，权限的合理划分可以提高任务的安全性，并且也可以提高生产效率。那么怎么去控制一个程序的权限呢？权限的前后端权限的控制也是分为前后端的。一般而言，权限交由后端控制是最安全稳妥的，因为前端控制权限只能通过对已经请求到的数据进行过滤，隐藏等操作，但这个时候客户端一定是已经拿到所有数据了，所以是有一定的安全风险的。权限的类型权限也是有分类的，在项目里面最常见的就是操作权限，菜单权限，角色权限等等。操作权限权限操作主要是对前端页面一些按钮或者输入框等用户可操作的

vant输入框组件label两端对齐/deep/ .van-field__label { span { display: inline-block; width: 70px; text-align-last: justify;; } }**解析：**首先使用/deep/穿透使其样式可以生效， 其次，label里面的文本是包含在span标签里面的，所以需要在span上进行修改。span标签不能直接设置宽度，所以需要先设置为行内会计元素，最后在tex

首先简单看看下面这个小demo <div> <h3>个人信息</h3> <p>姓名：{{person.name}}</p> <p>年龄：{{person.age}}</p> <p>爱好：水果--{{person.love.fruits}}, 蔬菜--{{person.love.vegetables}}</p> </div>import {reacti

试想一下，如果里面有一个请求的方法，当这个方法还没来得及响应，有数据就已经更新并重新执行了这块的方法，那么又会重复的调用请求，这不但会浪费服务资源，甚至会造成竞态问题，所以我们需要有一个时机，这个时机允许我们在下一次调用函数之前去做一个清除的操作。在watchEffect的第一个参数函数里面（我们叫做函数A），函数A也有一个参数，这个参数也是一个函数（我们叫他函数B），函数B的执行时机就是在下次函数A执行之前。在平时使用时，同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。

watch今天看教程，发现vue3里面的watch坑超级多，特此记录下。语法vue3组件改为组合式组件，所需的配置大都需要自己去引入，watch也是如此。watch(attr, callBack(newV, oldV), obj)vue3将计算属性（computed），侦听属性（watch）等一些配置设计为了函数模式，使用的时候直接调用watch函数即可（前提是已经引入）。attr表示需要监听的数据，callBack则为需要处理的回调函数，参数同vue2一样，newV为改变后的数据，oldV为改

我们只知道在setup里面定义变量需要使用ref函数才能变成响应式，但是具体过程及使用方式却不太清除，今天总结下。refref数据可以将非响应式数据转换为响应数据创建数据import {ref} from 'vue'export default { setup() { let name = ref('fufu') let age = ref(20) let love = ref({ fruits: ['watermelon', 'strawberry'], music:

setupsetup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等export default { name: 'setup', // setup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等 setup() { // 里面的写法同原生js let name = 'fufu' let age = 20 function getName() { console.log(name) } //该方法必须

今天遇到一个小问题，又是关于vue数据渲染的。选中模块分类时，带出业务类型大类的数据。但是写完之后数据没有带出，打印跟使用vue-devtools调试发现数据已经渲染，就明白又是数据渲染的问题。但是以前遇到这种问题，一般是对象或数组进行深层次的嵌套才会出现，这次就一个空对象，searchDataList: {}竟然也出现了这种问题。先不慌，这种问题遇到了很多次，解决办法也有问多。首先贴上简写的代码：getChildMedia() { this.searchDataList.mediaBigCat

一直没有仔细总结过路由缓存的方法，在这里简单总结下使用keep-alive + router-view组件keep-alive是Vue内置的一个组件，通常是用来保留数据状态或避免重复渲染，也就是我们说的缓存效果；

简单记录一下vue的混入功能1.使用前首先创建一个混入对象，最好新建一个文件，将对象导出2.混入对象里面可以创建vue实例上的data，methods等属性，也可以创建vue实例的生命周期函数3.引入混入对象，并使用mixins: [混入文件名]进行合并（合并规则：data，methods等属性与vue实例上的属性合并之后，调用时会优先调用vue实例上的数据，而生命周期函数不会被覆盖，实例与混入对象上的生命周期函数都会被调用，但是混入对象上的生命周期函数会被优先调用）全局混入混入也可以进行全局注册

众所周知，watch用来监听属性，它有两个参数，一个为改变后的值，一个为改变前的值 watch:{ firstname:function(newValue,OldValue){ console.log(newValue); console.log(OldValue); } }但是watch除了可以监听属性外，还可以用于监听路由watch: { $route: { handler(val, oldval) { console.log(val.p

平时使用vuex都是一些基本的使用`（this.$store.state, this.$store.commit(), this.、$store.dispatch()，今天添加了一些更高级的应用//调用案例import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { test: 'vuex测试状态', price: 80 }, mutations: {

一直理不清楚路由传参的几种方式，今天总结记录下第一种方法通过params与配置路由格式（特点：刷新数据不会丢失，会以/user/1234格式拼接显示在url里面）路由配置{ path: '/user/:id', name: 'user', component: user }带参数传递 //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: '/user/123',

之前从来都没觉得name属性有什么用，有时候会省略，今天使用递归组件发现他的作用，并总结了一些他的其他作用1.当使用组件递归调用时，被递归调用的组件必须定义name属性，因为在组件里面调用自己时，不是使用的在components里注册的组件，而是使用根据name属性查找组件2.keep-alive包裹动态组件时，会缓存不活动的组件实例，会出现include和exclude属性，包含或者排除指定name组件3.vue-tools插件调试时没有name属性会报错或警告...

今天做vue项目，里面使用了一个input组件，原本想按enter按键之后执行自定义方法，但是发现点击enter按键时会默认自动刷新页面，找了很久才明白原因，特此记录一下在html里面，如果form里面只存在一个input标签，那么系统会默认会给enter按键绑定上submit方法。如果未定义提交的路径，就会自动刷新页面。所以在vue里使用el-from组件，如果只有一个input标签，那么就会出现enter刷新清况。解决方法如下：第1步.@submit.native.prevent在form标签上