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

以下参考免费微信小程序：皆我百晓生 作答，并由阿齐Archie整理回复，若还有疑问可评论或留言。

从您提供的代码和描述来看，子组件 <show-model> 是一个使用了 uni-popup 和 uni-datetime-picker 的模态弹窗组件。问题可能出现在几个地方，我将逐一说明并提供解决方案。

1. 确保子组件正确传递 props 和事件

首先，确保父组件正确地将 showDialog 传递给子组件，并且子组件正确地接收并使用这个 prop。从您的代码来看，这一点应该是正确的。

2. 检查子组件的 v-model 绑定

在子组件中，您使用了 v-model 绑定 state.show 到 uni-popup 组件。请确保 uni-popup 组件支持 v-model 绑定，并且绑定的属性名称正确。

3. 检查子组件的样式

有时候，组件不显示可能是因为样式问题，比如 display: none 或者 visibility: hidden，或者组件被其他元素遮挡。检查子组件的样式，确保它不是隐藏的。

4. 检查子组件的逻辑

在子组件中，您使用了 watch 来监听 props.modelValue 的变化，并更新 state.show。这是正确的做法，但是请确保没有其他地方的代码覆盖了 state.show 的值。

5. 检查父组件的逻辑

确保父组件的 state.showDialog 能够正常变化，并且能够触发子组件的更新。您可以在父组件中添加一些 console.log 来调试。

6. 检查 uni-popup 和 uni-datetime-picker 组件

确保这两个组件在您的项目中是可用的，并且已经正确安装和配置。如果这两个组件有问题，也可能导致子组件不显示。

7. 检查 Vue 的版本兼容性

Vue 3 引入了一些新特性和变化，确保您使用的组件和库与 Vue 3 兼容。

示例代码调整

以下是一些可能需要调整的地方：

• 确保 uni-popup 组件使用了正确的 v-model 绑定属性（如果 show 是正确的绑定属性）。
• 如果 uni-popup 使用的是不同的属性来控制显示隐藏，请相应地调整 state.show 的绑定。

<!-- 子组件模板中 -->
<uni-popup ref="popup" v-model="state.show" mode="center" :animation="false" @close="cancel">
  <!-- ...其他内容... -->
</uni-popup>

• 确保 uni-datetime-picker 组件也正确接收 v-model。

<!-- 子组件模板中 -->
<uni-datetime-picker v-model="state.timeValue" type="datetime" />

如果上述检查和调整后问题仍然存在，请提供更多的代码或错误信息，以便进一步分析和解决问题。