uniapp是一款基于Vue.js开发的跨平台框架，可以使用Vue.js的语法进行开发，并且可以将代码编译成小程序、H5、App等多种平台的应用。在uniapp中，组件传值是非常重要的一部分，可以通过组件之间的数据传递来实现不同组件之间的交互和通信。

一、父组件向子组件传值

父组件向子组件传值是最常见的一种组件传值方式。在Uniapp中，可以通过props属性来实现父组件向子组件传递数据。在uniapp中，可以通过props属性来实现父组件向子组件传值。在父组件中，可以通过子组件的属性来传递数据。子组件可以通过props属性接收父组件传递的数据。具体步骤如下：

1.在父组件中定义要传递的数据，并通过props属性将数据传递给子组件。例如：

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import child from '@/components/child.vue'

export default {
  components: {
    child
  },
  data() {
    return {
      msg: 'Hello, child!'
    }
  }
}
</script>

2.在子组件中通过props属性接收父组件传递的数据，并在模板中使用。例如：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

二、子组件向父组件传值

子组件向父组件传值是另一种常见的组件传值方式。在uniapp中，可以通过自定义事件来实现子组件向父组件传递数据。在uniapp中，可以通过$emit方法来实现子组件向父组件传值。子组件可以通过emit方法来实现子组件向父组件传值。子组件可以通过emit方法触发父组件的事件，并传递数据给父组件。具体步骤如下：

1.在子组件中定义要传递的数据，并通过$emit方法触发自定义事件，并将数据作为参数传递给父组件。例如：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello, parent!')
    }
  }
}
</script>

2.在父组件中通过在子组件标签上绑定自定义事件，并在事件处理函数中接收子组件传递的数据。例如：

<template>
  <div>
    <child @message="receiveMessage"></child>
  </div>
</template>

<script>
import child from '@/components/child.vue'

export default {
  components: {
    child
  },
  methods: {
    receiveMessage(message) {
      console.log(message)
    }
  }
}
</script>

三、兄弟组件之间传值

兄弟组件之间的传值是指两个没有直接父子关系的组件之间的数据传递。在Uniapp中，可以通过Vuex来实现兄弟组件之间的传值。具体步骤如下：

1.在Vuex的store中定义一个共享的状态，并在需要传递数据的组件中使用该状态。例如：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello, sibling!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

export default store

2.在需要传递数据的组件中使用Vuex的mapState和mapMutations方法来获取和修改共享状态。例如：

<template>
  <div>
    <div>{{ message }}</div>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['setMessage']),
    changeMessage() {
      this.setMessage('Hello, sibling!')
    }
  }
}
</script>

3.在另一个组件中也使用mapState和mapMutations方法来获取和修改共享状态。例如：

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

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

四、跨页面传值

在uniapp中，跨页面传值是指在不同页面之间进行数据传递。Uniapp提供了多种方式来实现跨页面传值，包括使用URL参数、使用LocalStorage、使用Vuex等。

1.使用URL参数传值

使用URL参数传值是一种简单的跨页面传值方式。可以通过在URL中添加参数来传递数据，并在目标页面中通过this.$route.query来获取参数值。具体步骤如下：

在源页面中使用uni.navigateTo或uni.redirectTo方法跳转到目标页面，并在URL中添加参数。例如：

uni.navigateTo({
  url: '/pages/target?message=Hello'
})

在目标页面中通过this.$route.query来获取URL参数的值。例如：

<template>
  <div>
    {{ $route.query.message }}
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.query.message)
  }
}
</script>

2.使用LocalStorage传值

使用LocalStorage传值是一种在本地存储中存储数据，并在不同页面中读取数据的方式。可以通过uni.setStorageSync方法将数据存储到LocalStorage中，并通过uni.getStorageSync方法来读取数据。具体步骤如下：

在源页面中使用uni.setStorageSync方法将数据存储到LocalStorage中。例如：

uni.setStorageSync('message', 'Hello')

在目标页面中使用uni.getStorageSync方法来读取LocalStorage中的数据。例如：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.message = uni.getStorageSync('message')
  }
}
</script>

3.使用Vuex传值

使用Vuex传值是一种在全局状态管理中存储数据，并在不同页面中读取数据的方式。可以通过在Vuex的store中定义一个共享的状态，并在需要传递数据的组件中使用该状态。具体步骤如下：

在Vuex的store中定义一个共享的状态，并在需要传递数据的组件中使用该状态。例如：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello, Uniapp!'
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

export default store

在源页面中使用this.$store.commit方法来修改共享状态的值。例如：

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeMessage() {
      this.$store.commit('setMessage', 'Hello, Uniapp!')
    }
  }
}
</script>

在目标页面中使用this.$store.state来获取共享状态的值。例如：

<template>
  <div>
    {{ $store.state.message }}
  </div>
</template>

<script>
export default {}
</script>