uniapp 同级组件怎么通信？

Question

uniapp同级间的组件该怎么通信好点？是导航传值还是通过中间件好点？有代码能让我参考参考吗

Answer 1

在uniapp中，同级组件之间的通信可以通过使用Vuex实现。Vuex是一个专为vue.js应用开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它可以向不同的组件传递消息，这样就可以让同级组件之间彼此通信。

下面是一个关于Vuex实现uniapp组件间通信的代码样例：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: '' // 定义一个state，用来存储消息
  },
  mutations: {
    updateMessage(state, message) { // 定义一个mutation，用来更新message
      state.message = message
    }
  }
})


// App.vue
<template>
  <view class="app">
    <component1 />
    <component2 />
  </view>
</template>
<script>
import store from './store' // 导入store实例 
import component1 from './components/component1' // 导入component1组件 
import component2 from './components/component2' // 导入component2组件 
export default {
  data() {
    return {}; 
  }, 
  components: { component1, component2 }, // 注册component1、component2组件 

  store // 注册store实例 

   methods: {},

   created() {}

   } 

 </script>

 // component1.vue 

 <template> 

   <view class="component1">

     <!-- 点击更新message -->

     <button @click="updateMessage">更新Message</button>

   </view>

 </template>

 <script> 

 import { mapMutations } from 'vuex' // 导入mapMutations函数 

 export default {

   data() {

     return {}

   },

   methods: {

     ...mapMutations({ updateMessage: 'updateMessage' }), // 映射updateMessage方法到store中的updateMessage mutation 

     updateMessage() { // 点击更新message

       this.updateMessage('Hello World') // 调用mutation更新message值为'Hello World'

     }

   }

 }

 </script>

 // component2.vue 

 <template> 

   <view class="component2">{{ message }}</view> <!-- 显示message值 -->

 </template>

 <script> 

 import { mapState } from 'vuex' // 导入mapState函数 

 export default {

   data() {

     return {}

   },

   computed: {

     ...mapState({ message: state => state.message }) // 映射message值到store中state.message属性上 

   }

 }

 </script>

以上就是使用Vuex在uniapp中实现同级组件之间通信的方法。总体来说，使用Vuex实现uniapp组件之间的通信要比导航传信或者中间件传达更加方便快捷，而且也能够避免复杂的数据传输过程。
如果回答有帮助，望采纳。