在 Vue 中，如果你在使用 v-if 控制子组件的显示时遇到双向绑定数据失效的情况，主要原因是因为 v-if 会在条件不满足时销毁和重新创建子组件，这会导致子组件的状态被重置，从而使得双向绑定的数据也随之失效。

**解决方案：**

1. 使用 v-show 替代 v-if

如果你只是想控制子组件的显示和隐藏，而不是销毁和重建子组件，可以考虑使用 v-show 替代 v-if。v-show 只是简单地控制 CSS 的 display 属性，不会销毁和重新创建子组件，因此双向绑定的数据不会失效。

```

<template>

<ChildComponent v-show="showChild" v-model:height="parentHeight" />

<!-- 或者使用.sync -->

<!-- <ChildComponent v-show="showChild" :height.sync="parentHeight" /> -->

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

components: {

ChildComponent

},

data() {

return {

showChild: true,

parentHeight: 'auto'

};

}

};

</script>

```

2. 保持 v-if 的同时重新绑定数据

如果需要保留 v-if 条件控制子组件的创建和销毁，同时又希望保持双向绑定的数据有效，可以在重新创建子组件时，手动重新绑定数据。这可以通过监听 v-if 的变化，并在变化时手动更新数据来实现。

```

<template>

<ChildComponent v-if="showChild" :height="parentHeight" @update:height="parentHeight = $event" />

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

components: {

ChildComponent

},

data() {

return {

showChild: true,

parentHeight: 'auto'

};

},

watch: {

showChild(newValue) {

if (newValue) {

// 如果子组件重新创建，手动更新数据绑定

this.parentHeight = 'auto'; // 重置数据

}

}

}

};

</script>

```

在这个示例中，当 showChild 变为 true 时，我们手动将 parentHeight 数据重置，以确保新创建的子组件能够正确地绑定数据。

**总结**

选择使用 v-show 还是 v-if 取决于你的具体需求。如果你需要在控制显示和隐藏的同时保持双向绑定数据的有效性，可以使用 v-show。如果需要根据条件销毁和重新创建子组件，你可以在 v-if 的变化时手动重新绑定数据。