我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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,更新组件的时候,代码的维护量也相对集中,不会出现,这个组件要改一下,再改好几个组件才行。
0
评论(0)