vue3的子组件在父页面调用不显示不生效问题

Question

父页面调用子组件代码失败，为什么？
问题描述：当state.showDialog = true时，页面上没有预期的子组件弹窗

<show-model :v-model="state.showDialog" @confirm="getLoanTime" />

子组件代码：

<template>
    <view class="content">
        <uni-popup ref="popup" v-model="state.show" mode="center" :animation="false" @close="cancel">
            <uni-datetime-picker v-model="state.timeValue" type="datetime" />
            <div>
                <button @click="cancel">
                    取消
                </button>
                <button @click="confirm">
                    确定
                </button>
            </div>
        </uni-popup>
    </view>
</template>
<script lang="ts">
export default {
    name: "ShowModel"
};
</script>
<script setup lang="ts">
import { reactive, watch } from 'vue';
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  }
});

const state = reactive({
  timeValue: '',
  show: props.modelValue
 });

watch(() => props.modelValue, (newVal) => {
  state.show = newVal;
});

const cancel = () => {
  state.show = false;
  emit('update:modelValue', false);
};

const confirm = () => {
  state.show = false;
  emit('confirm', state.timeValue);
  // 通知父组件关闭弹窗
  emit('update:modelValue', false);
};

const emit = defineEmits(['update:modelValue', 'confirm']);
</script>
<style lang="scss">
.content{
  z-index: 9999;
}
</style>

Answer 1

以下参考免费微信小程序：皆我百晓生 作答，并由妄北y整理回复。

Vue 3 使用了 Composition API，其中 v-model 通常用于创建数据双向绑定。在 Vue 3 中，v-model 被分解为 modelValue 和 update:modelValue 事件。在您的子组件中，您已经正确地使用了这些属性和事件。

根据您提供的代码和问题描述，有几个可能的原因导致子组件没有按预期显示或不生效：

1. 父组件状态未正确传递：确保父组件的状态 state.showDialog 能够正确地传递到子组件。这可以通过在父组件中添加 console.log(state.showDialog) 来检查。

2. 子组件的 props 和 emit 未正确使用：您已经正确地设置 props 和 emit，但是需要确保父组件接收到 confirm 事件并执行相应的操作。

3. CSS 层级问题：如果子组件的弹出层被其他元素遮挡，可能导致看不到。检查 CSS 是否有 z-index 问题，确保 .content 的 z-index 足够高，不会被其他元素遮挡。

4. 父子组件通信问题：确保父组件和子组件之间的通信没有问题。可以在子组件的 watch 中添加 console.log(newVal) 来确认 props.modelValue 是否被正确更新。

5. 子组件的 v-model 绑定问题：检查 uni-popup 组件是否支持 v-model。如果不支持，您可能需要手动处理显示和隐藏逻辑。

6. Vue 版本问题：确保您使用的 Vue 版本是 3.x，因为 2.x 和 3.x 在 v-model 和 Composition API 上有显著差异。

7. 组件注册问题：确保 show-model 组件在父组件中已经正确注册，无论是全局注册还是局部注册。

8. 检查是否有其他错误：在浏览器的开发者工具中查看控制台，检查是否有任何错误或警告信息。

如果以上检查都没有问题，但子组件仍然不显示，可以尝试以下步骤进行调试：

• 确保父组件的状态 state.showDialog 在设置为 true 时，能够触发子组件的更新。
• 使用 Vue 开发者工具检查组件的状态和事件。
• 在子组件的 <script setup> 中添加更多的 console.log 语句，以跟踪状态和事件的变化。
• 如果可能，简化子组件，移除 uni-popup 和 uni-datetime-picker，用一个简单的元素（如 <div>）代替，以确定问题是否与这些组件有关。

通过逐步调试和检查，您应该能够找到问题的根源并解决它。