vue--没啥关系组件之间的通信

最新推荐文章于 2024-03-03 15:36:13 发布

Dj_Fairy

最新推荐文章于 2024-03-03 15:36:13 发布

阅读量1.3k

点赞数

分类专栏： vuex 文章标签： vuex

本文链接：https://blog.csdn.net/Dj_Fairy/article/details/88792028

版权

vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vu通信之间有很多种通信方法，很常见的比如写一个组件，子传父，父传子；通过路由之间通信

下面我介绍的是相互之间没有关系的组件之间通信的方法

第一种：使用event-bus来订阅发布，并且挂载到Vue.protytype之上

首先，新建一个event-bus.js

class Bus{
  constructor(){
    this.callbacks = {}
  }
  $on(name,fn){
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  $emit(name,args){
    if(this.callbacks[name]){
      // 存在 遍历所有callback
      this.callbacks[name].forEach(cb=> cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

使用与监听

// 使用
eventBus(){
    this.$bus.$emit('event-bus','消息')
}

// 监听
this.$bus.$on("event-bus",msg=>{
    this.msg = '接收event-bus消息:'+ msg
})

第二种：使用vuex

其实vuex很简单，简单的理解来说就是一个数据管理框架，大家将数据都放到一个地方，由这个地方指定的命令来存储和读取数据。先上一段代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/vuex/dist/vuex.min.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <button @click='add'>点击</button>
        <counter></counter>
    </div>

    <script>
        const counter = {
            template: `
            <div>
                <div>{{count}}</div>
                <div>{{name}}</div>
                <div>{{username}}</div>
            </div>           
            `,
            computed: {
                count() {
                    return this.$store.state.count
                },
                name() {
                    return this.$store.state.name
                },
                username() {
                    return this.$store.getters.username
                }
            }
        }
        const store = new Vuex.Store({
            state: {
                count: 10,
                name: '姐姐'
            },
            getters: {
                username(state) {
                    return state.name + ',你好'
                }
            },
            mutations: {
                increment(state, num) {
                    state.count = num
                },
                changeName(state, username) {
                    state.name = username
                }
            },
            actions: {
                incrementAction(context, num) {
                    context.commit('increment', num)
                }
            }

        })
        new Vue({
            el: '#app',
            store,
            data: {
                msg: '使用'
            },
            components: {
                counter
            },
            methods: {
                add() {
                    this.$store.dispatch('incrementAction', 500)
                    this.$store.commit('changeName', '哥哥')
                }
            },
        })
    </script>
</body>

</html>

根据以上例子我们来解读一下vuex的规则：

state是vuex的公共状态，我们可以把它看作所有组件的data，取值是this.$store.state.count
mutations可以理解为所有组件的methods属性，mutations对象中保存着更改数据的回调函数,第一个参数是state, 第二参数是payload, 也就是自定义的参数。传值： this.$store.commit('changeName', '哥哥')
actions类似于mutations，不同在于actions提交的是mutations，而不是直接改变其状态；actions可以包含异步操作；actions中回调函数的第一个参数是context,是一个与store实例具有相同属性和方法的对象。传值：this.$store.dispatch('incrementAction', 500)
getters可以理解为所有组件的computed属性，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。取值：this.$store.getters.username

Dj_Fairy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue--没啥关系组件之间的通信

vu通信之间有很多种通信方法，很常见的比如写一个组件，子传父，父传子；通过路由之间通信下面我介绍的是相互之间没有关系的组件之间通信的方法第一种：使用event-bus来订阅发布，并且挂载到Vue.protytype之上首先，新建一个event-bus.js class Bus{ constructor(){ this.callbacks = {} } $o...
复制链接

扫一扫