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>