這篇文章主要介紹“uni-app小程序中父組件和子組件傳值如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“uni-app小程序中父組件和子組件傳值如何實現”文章能幫助大家解決問題。

前言

1、父組件向子組件傳值 → 通過數據綁定

2、子組件向父組件傳值 → 通過事件

一、父組件向子組件傳值

通過props實現，即：子組件通過props來接收父組件傳過來的值

實現

父組件中：

1、引入子組件

2、注冊子組件

3、通過標簽形式載入；使用數據綁定進行傳值

子組件中：

1、通過props接收父組件中傳遞過來的值

具體演示代碼

父組件：index.vue

<template>
<comA:list="listData"></comA>
</template>

<script>
importcomAfrom'@/components/comA.vue'
exportdefault{
components:{comA},
data(){
return{
listData:[
{"name":"劉","age":"12"},
{"name":"肖","age":"20"}
]
}
}
}
</script>

子組件：comA.vue

<template>
<view>
<blockv-for="(item,index)inlist":key="index">
<viewclass="flex">
<text>{{item.name}}</text>
<text>{{item.age}}</text>
</view>
</block>
</view>
</template>

<script>
exportdefault{
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>
importcomAfrom'@/components/comA.vue'
exportdefault{
components:{comA},
methods:{
childClick(e){
console.log(e)
}
}
}
</script>

子組件：comA.vue

<template>
<view@click="sendValue"></view>
</template>

<script>
exportdefault{
name:"comA",
props:{},
methods:{
sendValue:function(){
//向父組件傳值
this.$emit("childClick","我來自子組件")
},
}
}
</script>

總結

以上是生活随笔為你收集整理的uni-app小程序中父组件和子组件传值如何实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。