uni-app小程序中父組件和子組件傳值的實現(xiàn)實例
更新時間：2022年08月02日 12:28:53 作者：也?簡
uniapp父子組件引用傳值,和vue的一樣,沒有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序中父組件和子組件傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
1、父組件向子組件傳值 → 通過數(shù)據(jù)綁定
2、子組件向父組件傳值 → 通過事件
一、父組件向子組件傳值
通過props實現(xiàn)，即：子組件通過props來接收父組件傳過來的值
實現(xiàn)
父組件中：
1、引入子組件
2、注冊子組件
3、通過標簽形式載入；使用數(shù)據(jù)綁定進行傳值
子組件中：
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實現(xiàn)，即：子組件通過props來接收父組件傳過來的值
實現(xiàn)
父組件中：
1、引入子組件
2、注冊子組件
3、通過標簽形式載入；使用數(shù)據(jù)綁定進行傳值
4、注冊子組件函數(shù)
子組件中：
1、通過$emit()函數(shù)向父組件傳值
具體演示代碼
父組件：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>總結(jié)
到此這篇關(guān)于uni-app小程序中父組件和子組件傳值的文章就介紹到這了,更多相關(guān)uni-app小程序父組件和子組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript中的數(shù)據(jù)類型檢測方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測方法,結(jié)合實例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測操作技巧,需要的朋友可以參考下2019-08-08
相信大家都很喜歡網(wǎng)易郵箱、QQ瀏覽器的官方網(wǎng)站這樣的可全屏滾動的效果，也許更多的朋友想把全屏滾動效果做到自己的網(wǎng)站中，本文就帶著大家一起完成這個效果2015-11-11
javascript之Object.assign()的痛點分析
這篇文章主要介紹了javascript之Object.assign()的痛點分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
ECMAScript5中的對象存取器屬性：getter和setter介紹
這篇文章主要介紹了ECMAScript5中的對象屬性存取器：getter和setter介紹,事實上在除ie外最新主流瀏覽器的實現(xiàn)中,任何一個對象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”,需要的朋友可以參考下2014-12-12
詳解webpack與SPA實踐之開發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack與SPA實踐之開發(fā)環(huán)境搭建,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了淺談javascript事件取消和阻止冒泡的方法和示例，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)DOM對象選擇器,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JS request函數(shù) 用來獲取url參數(shù)
項目中經(jīng)常會遇到這種問題 下面代碼解決問題！2010-05-05
本文給大家分享一段簡單的代碼基于js實現(xiàn)開關(guān)燈效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了編譯打包video.js的方法，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-12-12