使用.sync，更优雅的实现数据双向绑定

发表于 更新于 分类于

在 Vue 中，props 属性是单向数据传输的，父级的 prop 的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对 prop 进行“双向绑定”。上文中，我们提到了使用 v-model 实现双向绑定。但有时候我们希望一个组件可以实现多个数据的“双向绑定”，而 v-model 一个组件只能有一个(Vue3.0 可以有多个)，这时候就需要使用到.sync。

.sync 与 v-model 的异同

相同点：

两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定
两个都是通过属性+事件来实现的

不同点：

一个组件只能定义一个 v-model，但可以定义多个.sync
v-model 与.sync 对于的事件名称不同，v-model 默认事件为 input，可以通过配置 model 来修改，.sync 事件名称固定为 update:属性名

自定义.sync

在开发业务时，有时候需要使用一个遮罩层来阻止用户的行为（更多会使用遮罩层+loading 动画），下面通过自定义.sync 来实现一个遮罩层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div class="custom-overlay" v-show="visible" @click="$_handleClick"></div>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      $_handleClick(e) {
        this.$emit("input", e.target.value);
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--调用方式-->
<template>
  <custom-overlay :visible.sync="visible" />
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>