vue2 简单实现自定义组件实现双向绑定，v-model在自定义组件中的实现

vue2 自定义组件实现双向绑定，v-model在自定义组件中的实现

• 父组件

<template>
  <div>
    <子组件 :对外双向绑定属性名.sync="父组件双向绑定属性名" />
  </div>
</template>
<script>
export default {
  data() {
	return {
		父组件双向绑定属性名: '',
	}
  }
}
</script>

• 子组件

<template>
  <div>
    <div v-model="_双向绑定内部过渡属性名"/>
  </div>
</template>
 
<script>
//子组件    
export default {
  data() {
    return {
      _双向绑定内部过渡属性名: "", 
    };
  },
  props: ["对外双向绑定属性名"],
  watch: {
    对外双向绑定属性名: {
      handler(newData) {
        this._双向绑定内部过渡属性名 = newData;
      },
      deep: true,
      immediate: true,
    },
    _双向绑定内部过渡属性名(newData) {
      this.$emit(`update:对外双向绑定属性名`, newData);
    },
  },
};
</script>