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ù)類(lèi)型檢測(cè)方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類(lèi)型檢測(cè)方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類(lèi)型并總結(jié)分析了常見(jiàn)的數(shù)據(jù)類(lèi)型檢測(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方法所取代,這被稱(chēng)之為“存取器屬性”,需要的朋友可以參考下2014-12-12
詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack與SPA實(shí)踐之開(kāi)發(fā)環(huán)境搭建,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了淺談javascript事件取消和阻止冒泡的方法和示例，有需要的小伙伴可以參考下。2015-05-05
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)開(kāi)關(guān)等效果
本文給大家分享一段簡(jiǎn)單的代碼基于js實(shí)現(xiàn)開(kāi)關(guān)燈效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了編譯打包video.js的方法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-12-12