uniapp同级间的组件该怎么通信好点?是导航传值还是通过中间件好点?有代码能让我参考参考吗
在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组件之间的通信要比导航传信或者中间件传达更加方便快捷,而且也能够避免复杂的数据传输过程。
如果回答有帮助,望采纳。
Vuex数据刷新后会消失,需要使用localstorage 绑定。进行持久化