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小程序中父組件和子組件傳值的文章就介紹到這瞭,更多相關uni-app小程序父組件和子組件傳值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!