我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
vue 组件开关变量的小技巧
木灵鱼儿
198 天前vue 项目实战
280
0
0
以前的我，很喜欢用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)