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

