uni-app 抖音小程序嵌套组件拿到的props为null
uni-app 抖音小程序嵌套组件拿到的props为null
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win11 | HBuilderX |
示例代码：
示例代码：
页面index.vue
<template>
<div>
<component-a v-bind:user-name="userName" />
</div>
</template>
<script>
import ComponentA from "./components/ComponentA.vue"
export default {
components: {ComponentA},
data() {
return {
userName: '张三'
}
}
}
</script>组件 ComponentA.vue
<template>
<div>
<div>A中直接渲染：{{studentName}}</div>
<component-b v-bind:user-name="studentName"/>
</div>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
components: {ComponentB},
props: {
userName: {
required: true
}
},
data() {
console.log("组件A props", this.userName)
return {
viewReady: false,
studentName: this.userName
}
},
created(){
console.log("组件A data",this.studentName)
}
}
</script>组件 componentB.vue
<template>
<div>组件B中渲染：{{user.name}}</div>
</template>
<script>
export default {
props: {
userName: {
required: true
}
},
data() {
console.log("组件B",this.userName)
return {
user:{
name:this.userName
}
}
}
}
</script>
### 操作步骤：
#### 操作步骤：
下载附件中的代码运行即可预期结果：
预期结果：
在组件B中渲染user.name为index.vue中传入的“张三”
### 实际结果：
#### 实际结果：
在组件B中渲染`user.name`为null
7 回复
在 Uni-App 中开发抖音小程序时，嵌套组件的 props 为 null 的问题，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和解决：
1. 检查父组件是否正确传递 props
确保父组件在调用子组件时，正确传递了 props。例如：
<!-- 父组件 -->
<template>
<ChildComponent :myProp="myData" />
</template>
<script>
export default {
data() {
return {
myData: 'Hello, World!',
};
},
};
</script>2. 检查子组件是否正确声明 props
在子组件中，确保 props 被正确声明。例如：
<!-- 子组件 -->
<template>
<div>{{ myProp }}</div>
</template>
<script>
export default {
props: {
myProp: {
type: String,
default: '', // 默认值
},
},
};
</script>3. 检查 props 命名是否一致
确保父组件传递的 props 名称与子组件中声明的 props 名称完全一致（包括大小写）。
4. 检查抖音小程序平台的兼容性
抖音小程序基于字节跳动的小程序框架，可能与 Uni-App 的某些特性不完全兼容。确保你使用的是最新的 Uni-App 版本，并检查是否有相关的平台限制。
5. 调试 props 的值
在子组件的 mounted 或 created 生命周期中，打印 props，检查是否正常接收：
<script>
export default {
props: {
myProp: String,
},
mounted() {
console.log('Received props:', this.myProp);
},
};
</script>6. 检查 Uni-App 编译配置
在 pages.json 或 manifest.json 中，确保抖音小程序的配置正确。例如：
{
"mp-toutiao": {
"appid": "your-appid",
"setting": {
"urlCheck": false
}
}
}7. 使用 provide/inject 作为替代方案
如果 props 仍然无法传递，可以尝试使用 provide 和 inject 来实现跨组件数据传递：
<!-- 父组件 -->
<script>
export default {
provide() {
return {
myData: this.myData,
};
},
data() {
return {
myData: 'Hello, World!',
};
},
};
</script>
<!-- 子组件 -->
<script>
export default {
inject: ['myData'],
mounted() {
console.log('Injected data:', this.myData);
},
};
</script>