如何在uniapp中實現子組件向父組件傳值

一、通過自定義事件實現子組件向父組件傳值

在uniapp中，可以通過自定義事件實現子組件向父組件傳值。具體流程如下：

1、在父組件中，在需要接受子組件傳值的地方註冊一個自定義事件，例如：

<template>
  <!-- 這裡是父組件 -->
  <child-component @myEvent="handleMyEvent"></child-component>
</template>

<script>
  export default {
    methods: {
      handleMyEvent(data) {
        console.log(data) // 這裡就可以拿到子組件傳過來的數據了
      }
    }
  }
</script>

2、在子組件中觸發自定義事件，並將數據傳遞給父組件，例如：

<template>
  <!-- 這裡是子組件 -->
  <button @click="handleClick">傳遞數據</button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$emit('myEvent', '這是子組件傳遞過來的數據')
      }
    }
  }
</script>

這樣，就完成了子組件向父組件傳遞數據的過程。

二、通過$refs實現子組件向父組件傳值

uniapp中還可以通過$refs實現子組件向父組件傳值。具體流程如下：

1、在子組件中定義一個方法，用於向父組件傳遞數據：

<template>
  <!-- 這裡是子組件 -->
  <button @click="handleClick">傳遞數據</button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$parent.setData('這是子組件傳遞過來的數據')
      }
    }
  }
</script>

2、在父組件中定義一個方法，用於接收子組件傳過來的數據，並將數據存放到父組件的data中：

<template>
  <!-- 這裡是父組件 -->
  <child-component ref="myChild"></child-component>
</template>

<script>
  export default {
    methods: {
      setData(data) {
        this.$set(this.$data, 'myData', data)
      }
    }
  }
</script>

3、在父組件中使用$refs獲取子組件實例，並調用子組件中的方法傳遞數據：

<template>
  <!-- 這裡是父組件 -->
  <child-component ref="myChild"></child-component>
  <button @click="handleClick">點擊獲取數據</button>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        this.$refs.myChild.handleClick()
      }
    }
  }
</script>

這樣，就完成了子組件向父組件傳遞數據的過程。

三、通過Vuex實現子組件向父組件傳值

uniapp中還可以通過Vuex實現子組件向父組件傳值。具體流程如下：

1、在Vuex中定義一個數據倉庫，存放需要傳遞的數據：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myData: ''
  },
  mutations: {
    setMyData(state, data) {
      state.myData = data
    }
  }
})

export default store

2、在子組件中調用Vuex中的mutations，將數據存儲到數據倉庫中：

<template>
  <!-- 這裡是子組件 -->
  <button @click="handleClick">傳遞數據</button>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    methods: {
      ...mapMutations(['setMyData']),
      handleClick() {
        this.setMyData('這是子組件傳遞過來的數據')
      }
    }
  }
</script>

3、在父組件中使用計算屬性獲取數據倉庫中存儲的數據：

<template>
  <!-- 這裡是父組件 -->
  <p>{{ myData }}</p>
  <child-component></child-component>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    computed:{
      ...mapState(['myData'])
    }
  }
</script>

這樣，就完成了子組件向父組件傳遞數據的過程。