vue2和vue3组件传参双向绑定

众所周知，vue组件传参都是单向数据源，但开发中每次通过$emit传参给父组件并不是很方便，vue2.3.0之后新增了修饰符.sync可以快速解决这个问题

vue2 传参双向绑定

父组件

{{ id }}
<Child :id.sync="id" />

子组件

<template>
  <input v-model="ids" type="text">
</template>
<script>
export default {
  props: {
    id:{
      type:Number,
      default:1
    },
  },
  computed:{
    ids: {
      get() {
        return this.id;
      },
      set(val) {
        this.$emit("update:id", val);
      }
    }
  }
}
</script>

vue3 传参双向绑定

父组件

{{ id }}
<Child v-model:id="id" />

子组件

<template>
  <input v-model="ids" type="text" />
</template>
<script>
import { computed } from "vue";
export default {
  props: {
    id: {
      type: Number,
      default: 1
    }
  },
  setup(props, context) {
    let ids = computed({
      get() {
        return props.id;
      },
      set(val) {
        context.emit("update:id", val);
      }
    });
    return {
      ids
    };
  }
};
</script>

vue3还可以通过provide和inject 会更加方便，也是vue3的核心功能，下篇博客将会详细讲解provide和inject 的使用