vue3中使用v-if判断子组件是否显示时，双向绑定的变量失效！！！

在 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" />
  
  
</template>

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>

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 的变化时手动重新绑定数据。

lybbn/django-vue-lyadmin

内容风险标识

评论 (0)

lybbn/django-vue-lyadmin .gitee-modal { width: 500px !important; }

内容风险标识