这篇文章主要介绍“uni-app小程序中父组件和子组件传值如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uni-app小程序中父组件和子组件传值如何实现”文章能帮助大家解决问题。
1、父组件向子组件传值 → 通过数据绑定
2、子组件向父组件传值 → 通过事件
通过props实现，即：子组件通过props来接收父组件传过来的值
实现
父组件中：
1、引入子组件
2、注册子组件
3、通过标签形式载入；使用数据绑定进行传值
子组件中：
1、通过props接收父组件中传递过来的值
具体演示代码
父组件：index.vue
计算
安全
数据库
网络和加速
企业服务
<template>
<comA :list="listData"></comA>
</template>
<script>
import comA from '@/components/comA.vue'
export default{
components:{comA},
data(){
return{
listData:[
{"name": "刘", "age": "12"},
{"name": "肖", "age": "20"}
]
}
}
}
</script>子组件：comA.vue
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view class="flex">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</view>
</block>
</view>
</template>
<script>
export default {
name: "comA",
props:{
list:{
type: [Array],
default: []
}
},
data() {
return {}
},
}
</script>通过props实现，即：子组件通过props来接收父组件传过来的值
实现
父组件中：
1、引入子组件
2、注册子组件
3、通过标签形式载入；使用数据绑定进行传值
4、注册子组件函数
子组件中：
1、通过$emit()函数向父组件传值
具体演示代码
父组件：index.vue
<template>
<comA @ChildClick="childClick"></comA>
</template>
<script>
import comA from '@/components/comA.vue'
export default{
components:{comA},
methods:{
childClick(e){
console.log(e)
}
}
}
</script>子组件：comA.vue
<template>
<view @click="sendValue"></view>
</template>
<script>
export default {
name:"comA",
props:{},
methods:{
sendValue: function(){
// 向父组件传值
this.$emit("childClick","我来自子组件")
},
}
}
</script>关于“uni-app小程序中父组件和子组件传值如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
