如何使用vuex实现兄弟组件通信
程序员文章站
2023-11-07 17:54:28
前言
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。
下面这篇文章就来给大家介绍下vuex兄...
前言
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。
下面这篇文章就来给大家介绍下vuex兄弟组件通信的方法,下面话不多说了,来一起看看详细的介绍吧
1. 核心想法
使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一),将每个子组件的数据都存放进去,每个子组件都从vuex里获取数据,其实就是一句话——把vuex作为一个桥
2. 具体代码
父组件app.vue
<template> <div id="app"> <childa/> <childb/> </div> </template> <script> import childa from './components/childa' // 导入a组件 import childb from './components/childb' // 导入b组件 export default { name: 'app', components: {childa, childb} // 注册a、b组件 } </script> <style> #app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } div { margin: 10px; } </style>
子组件childa
<template> <div id="childa"> <h1>我是a组件</h1> <button @click="transform">点我让b组件接收到数据</button> <p>因为你点了b,所以我的信息发生了变化:{{bmessage}}</p> </div> </template> <script> export default { data() { return { amessage: 'hello,b组件,我是a组件' } }, computed: { bmessage() { // 这里存储从store里获取的b组件的数据 return this.$store.state.bmsg } }, methods: { transform() { // 触发receiveamsg,将a组件的数据存放到store里去 this.$store.commit('receiveamsg', { amsg: this.amessage }) } } } </script> <style> div#childa { border: 1px solid black; } </style>
子组件childb
<template> <div id="childb"> <h1>我是b组件</h1> <button @click="transform">点我让a组件接收到数据</button> <p>因为你点了a,所以我的信息发生了变化:{{amessage}}</p> </div> </template> <script> export default { data() { return { bmessage: 'hello,a组件,我是b组件' } }, computed: { amessage() { // 这里存储从store里获取的a组件的数据 return this.$store.state.amsg } }, methods: { transform() { // 触发receivebmsg,将b组件的数据存放到store里去 this.$store.commit('receivebmsg', { bmsg: this.bmessage }) } } } </script> <style> div#childb { border: 1px solid green; } </style>
vuex模块store.js
import vue from 'vue' import vuex from 'vuex' vue.use(vuex) const state = { // 初始化a和b组件的数据,等待获取 amsg: '', bmsg: '' } const mutations = { receiveamsg(state, payload) { // 将a组件的数据存放于state state.amsg = payload.amsg }, receivebmsg(state, payload) { // 将b组件的数据存放于state state.bmsg = payload.bmsg } } export default new vuex.store({ state, mutations })
我把所有的代码+注释都放在github了,,
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。