本文介绍 UniApp 中父组件向子组件传递数据的三种核心方法。首先讲解最常用的 Props 属性绑定，其次演示灵活的 Slot 插槽内容分发，最后通过 Ref 获取组件实例并调用其内部函数。文章结合代码示例，帮助开发者掌握不同场景下的组件通信技巧。
前言
在 UniApp 开发中，父组件向子组件传递数据主要包含三种方式：使用 props 属性、利用 slot 插槽以及通过 ref 引用组件实例。
1、Props
这是最简单且最常用的传值方式。子组件需要在 js 部分定义变量，并通过 props 选项声明接收来自父组件的数据。
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
{{value}}
</view>
</view>
</template>
<script>
export default {
props:['value'],
methods:{
}
}
</script><template>
<view>
<!-- 我是父组件 -->
<newzujian value='789' >
</newzujian>
</view>
</template>
<script>
export default {
methods: {
}
}
</script>2、Slot
插槽机制提供了更灵活的内容分发方式，允许在子组件中预设插入点。子组件通过定义带有 name 属性的 slot 标签，父组件即可在对应位置进行内容插值，例如使用 #name 语法。
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
<slot name="value"></slot>
</view>
</view>
</template>
<script>
export default {
methods:{
}
}
</script> <template>
<view>
<!-- 我是父组件 -->
<newzujian >
<template #value>
789
</template>
</newzujian>
</view>
</template>
<script>
export default {
methods: {
}
}
</script>3、Ref 函数控制
这种方式允许父组件通过 ref 获取子组件的实例，进而调用子组件内部定义的函数，从而实现对子组件状态或行为的直接操作。
<template>
<view>
<!-- 我是子组件 newzujian-->
<view class="">
{{value}}
</view>
</view>
</template>
<script>
export default {
data(){
return{
value:''
}
},
methods:{
gaibian(){
this.value='789'
}
}
}
</script> <template>
<view>
<!-- 我是父组件 -->
<newzujian ref="hanshu" >
</newzujian>
<button @click="dianji">click</button>
</view>
</template>
<script>
export default {
onLoad() {
},
methods: {
dianji(){
this.$refs.hanshu.gaibian()
}
}
}
</script>总结
至此，关于 UniApp 父子组件传值的三种方法（props、slot 和 ref）的介绍已完成。如需了解更多相关内容，建议查阅本站往期文章或继续浏览后续教程，感谢大家的支持！