一、通过自定义事件实现子组件向父组件传值

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

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