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
  • 本文分类:vue 项目实战
  • 本文标签:vuex
  • 流行热度:已超过 101 人围观了本文
  • 发布日期:2020年07月6日 - 9时35分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码