如何在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>

这样，就完成了子组件向父组件传递数据的过程。