uni-app 鸿蒙next + 京东小程序子组件内接收不到父组件传递的参数变化

uni-app 鸿蒙next + 京东小程序子组件内接收不到父组件传递的参数变化

开发环境 版本号 项目创建方式
Mac 15.4.1 HBuilderX
HBuilderX 4.76
第三方开发者工具 2.5.3
基础库 3.0.0-alpha-4080120250821001

示例代码：

父组件

<script lang="ts" setup>  
import { ref, watch } from 'vue';  
import Child from './child.vue';  
const visible = ref(false);  
setTimeout(() => {  
  visible.value = true;  
}, 3000);  
// 添加 watch 来调试父组件中的值变化  
watch(visible, newVal => {  
  console.log('Parent visible changed to:', newVal);  
});  
</script>  

<template>  
    <Child v-model:visible="visible" />  
</template>

子组件

<script lang="ts" setup>  
import { watch } from 'vue';  
const props = defineProps<{  
  visible: boolean;  
}>();  
watch(  
  () => props.visible,  
  val => {  
    console.log('visible', val);  
  },  
  {  
    immediate: true,  
    deep: true,  
  },  
);  
</script>  

<template>  
  <div>visible： {{ visible }}</div>  
</template>

更多关于uni-app 鸿蒙next + 京东小程序子组件内接收不到父组件传递的参数变化的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 鸿蒙next + 京东小程序子组件内接收不到父组件传递的参数变化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的响应式数据传递问题。在 uni-app 中，特别是鸿蒙 Next 和京东小程序环境下，需要注意以下几点：

  1. props 定义方式：你的子组件使用了 TypeScript 的泛型定义方式，在某些环境下可能存在兼容性问题。建议使用标准的 defineProps 语法：
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
  1. v-model 语法检查：在部分小程序环境中，v-model:visible 这种语法可能支持不完善。可以尝试改用标准的 props 传递：
<Child :visible="visible" />
回到顶部