uni-app APP中父组件向子组件传值，子组件无法接收，并且子组件的mounted()函数也没有执行

测试过的手机

苹果12 版本：ios15.1.1
魅族17pro 版本：安卓11

操作步骤

直接粘贴即可复现

预期结果

期望子组件可以获取到父组件传递的数据

实际结果

子组件接收到的值为undefined，支付宝小程序和微信小程序都可以接收到数据，安卓APP和iosAPP无法接收

bug描述

index.vue文件

<template>  
  <view class="home">  
    <HomeList type="home" :list="list" />  
  </view>  
</template>  
<script>  
import { HomeList } from "@/components/homeList";  
export default {  
      components: { HomeList },  
      data() {  
            return {  
                list: [{  
                                     id: 1,  
                                     name: '测试123'  
                                }],  
            };  
      },  
  }  
</script>

components文件下的homeList.vue

<template>  
     <view :style="type == 'seek' ? 'margin-top: 80rpx' : ''">  
        <!-- 这里type 和 list 显示都是undefined  -->  
         <view>{{ type }}</view>    
         <view>{{ list }}</view>  
     </view>  
</template>  
<script>  
export default {  
  name: "home-list",  
  props: {  
    list: {  
      type: Array,  
      default: [],  
      required: true,  
    },  
    type: {  
      type: String,  
      default: "home",  
      required: true,  
    },  
  },  
  data() {  
    return {};  
  },  
  mounted() {  
    console.log("-----------------------"); //这里没有打印出来  
  },  
  watch: {  
    list: {  
      handler(newName, oldName) {  
        console.log("++++++++++++++++++++++");  //这里也没有打印出来  
        console.log(newName);  
      },  
      immediate: true,  
      deep: true,  
    },  
  },  
</script>

信息项	描述
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.3.5
手机系统	全部
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

更多关于uni-app APP中父组件向子组件传值，子组件无法接收，并且子组件的mounted()函数也没有执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼

运行到h5正常吗？

yibo5220 2楼

已解决，引入组件应该写成 import HomeList from “@/components/homeList”; 我把 { HomeList } 引起来了

yuanlaile 3楼

贴回去看对不对，用 easycom，不用直接import 组件：
<template>
<view class="home">
<homeList type="home" :list="list" />
</view>
</template>

ionicwang 4楼

easycom可以使用，问题已解决，感谢！

eggper 5楼

还有个问题，cover-view组件中，APP端无法使用display:flex;浮动，这个怎么解决？

caililin 6楼

回复 1***@qq.com: 另开一个贴反馈，提供可复现的示例工程

zlyuanteng 7楼

这是一个典型的 uni-app App 端组件通信问题。从你的代码和描述来看，问题可能出在以下几个方面：

1. 组件导入路径问题

你的组件导入语句是：

import { HomeList } from "@/components/homeList";

请确认：

@/components/homeList 路径是否正确
组件文件实际路径是否为 components/homeList/homeList.vue
尝试改为相对路径测试：import HomeList from './components/homeList/homeList.vue'

2. App 端特有的生命周期问题

在 uni-app 的 App 端，组件生命周期可能有不同的表现。建议：

在子组件中添加 created 生命周期测试：

created() {
  console.log('created 执行', this.type, this.list);
},
mounted() {
  console.log('mounted 执行', this.type, this.list);
}

3. props 接收问题排查

修改子组件的 props 定义，添加更详细的验证：

props: {
  list: {
    type: Array,
    default: () => [],  // 使用函数返回默认值
    required: true,
    validator: (value) => {
      console.log('props validator:', value);
      return Array.isArray(value);
    }
  },
  type: {
    type: String,
    default: "home",
    required: true,
  },
},

4. 使用 this.$nextTick 测试

在父组件中尝试：

mounted() {
  this.$nextTick(() => {
    console.log('父组件 nextTick', this.list);
  });
}

5. 临时解决方案

如果上述方法无效，可以尝试使用 provide/inject 作为临时解决方案：

父组件：

export default {
  provide() {
    return {
      homeList: this.list,
      homeType: this.type
    };
  },
  // ... 其他代码
}

子组件：

export default {
  inject: ['homeList', 'homeType'],
  data() {
    return {
      list: this.homeList || [],
      type: this.homeType || 'home'
    };
  },
  // ... 其他代码
}