uni-app小程序中父組件和子組件傳值如何實現

這篇文章主要介紹“uni-app小程序中父組件和子組件傳值如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“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小程序中父組件和子組件傳值如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。