木灵鱼儿
阅读:2265
vue 组件开关变量的小技巧
以前的我,很喜欢用vuex来做一个元素的开关存储,因为简单粗暴,我不用考虑组件之间要怎么才能传参,怎么去更新,只需要设置一个变量,getters获取,mutations设置一下,一个开关变量就做好了。
但是随着东西越来越多,我发现,vuex重复书写的代码非常多,我觉得这应该是以后vuex优化的一大方向,所以,我有点不太想用vuex来存储所有组件的开关状态了。
于是我想到了props,父组件向子组件传参的方式传替布尔值开关。
再利用sync修饰符,通过预设的更新方法更新内容。
父组件
<Child :switch.sync="open">
<script>
export default {
data:()=>({
open: false
})
}
</script>
子组件
<div v-if="switch" @click="close">子组件内容</div>
<script>
export default {
props:["switch"],
methods:{
close(){
this.$emit("update:switch", false);
}
}
}
</script>
从这里我们可以看出,要想父组件能更新这个布尔值,必须要有子组件运行一次emit
才行。
一般情况下可能是利用事件去触发,但是有的可能是v-model绑定的,怎么办?
v-model 更新变量
很简单,我们可以利用computed计算属性,这里以vant的popup组件为例
子组件
<van-popup v-model="show">子组件内容</van-popup>
<script>
export default {
props:["switch"],
conputed:{
show:{
get(){
return this.switch;
},
set(val){
this.$emit("update:switch", val);
}
}
}
}
</script>
利用计算属性生成一个变量给组件绑定,在通过独有的get和set方法更新和传输开关变量,这样就可以省去写一次vuex,更新组件的时候,代码的维护量也相对集中,不会出现,这个组件要改一下,再改好几个组件才行。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
分享一个利用vuex+session缓存侧边栏数据的方案
前言侧边栏导航大多数情况可能会由后端返回导航内容,第一是方便修改,第二是可以做一些菜单鉴权操作,但是这也会产生一个问题:侧边栏api请求会非常频繁如何避免这个问题,我们就需要使用缓存方案,在web中,缓存有:local,session,cookie,还有一些更复杂的就不说了,用不到。local会永久存储,这样我们刷新页面,数据以缓存优先的话,就会无法及时更新了。passcookie,spa用cookie很少了,而且他有容量限制,直接pass。那么只有session了,session会在页面关闭后自动清理,这样下次重新打开页面数据依旧可以保持最新,并且新建页面,同域名,session也是可...
vuex持久化插件vuex-persistedstate的模块化写法
继《vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入》的续章。在处理vuex持久化时,由于之前知识储备不足,没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间,因为他本身就是按照你vuex模块的层级配置的,也就是默认就是命名空间层级,所以:plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...
vue路由切换取消上一个路由未完成的axios请求
同事写的,我也是借花献佛,顺带做个笔记axios拦截器添加取消请求的方法因为我们需要在路由进入前判断有没有存在取消请求的方法,所以需要一个存储介质,选用数组,然后存放在vuex中,一是方便动态追踪,二是本来就在axios和router里面import了vuex,就没必要添加window的全局变量了。import axios from "axios"; import store from "./store"; //vuex //拦截器 api.interceptors.request.use(config => { //设置取消请求的...
vuex核心概念和底层原理
vuex作为一个共享的数据对象,用于不同组件的共用一个数据,并且动态响应数据变化,配合computed属性,可以对数据进行缓存。在vuex里面,在异步处理actions上,最终也还是要用到commit同步操作方法操作数据,并不是actions方法本身处理了数据,原因是因为需要有操作记录,方便在插件上查看。废话不多说,直接上底层原理。原理vuex其实就是一个重新封装的new Vue 对象,他的动态响应数据就是data属性,而commit这些方法,都只是回调而已。import Vue from "vue"; const Store = function(options ...