vue进行组件间通信的方式

Lmuy
596 阅读1分钟

vue中组件通信是很常见的场景，今天我们就来展开讨论一下组件间是如何通信的，以下是我总结的6种通信方式。 1.简单父子组件间通信：父组件props、子组件emit

实现方式是：父组件向子组件通过props传递数据，子组件通过$emit触发父组件方法来改变数据，实现父子组件间通信。

// 以下为伪代码
// 父
<template>
    <div>
        <Child :name="name" $changeChildName="changeName"/>
    </div>
</template>
<script>
    ...
    methods: {
        changeName(name) {
            this.name = name
        }
    }
</script>
// 子
<template>
    <div>
        {{ name }}
    </div>
</template>
<script>
    ...
    methods: {
        changeChildName(name) {
            this.$emit('changeName', 'hello')
        }
    }
</script>

2.借助EventBus事件总线实现组件通信

通过on来接受消息，on来接受消息，emit来推送消息，实现组件通信。

// 以下为伪代码
// 组件A发送消息
<template>
    <div>
        ...
    </div>
</template>
<script>
    ...
    methods: {
        sendMsg(msg) {
            EventBus.$emit('message', msg)
        }
    }
</script>
// 组件B接受消息
<template>
    <div>
        ...
    </div>
</template>
<script>
    ...
    methods: {
        getMsg() {
            EventBus.$on('message', (msg) => {
               ... 
            })
        }
    }
</script>

需要注意的是，再通信完毕之后注意使用EventBus.$off()移除消息总线

3.vuex

这个大家同样也都耳熟能详了，主要包括：state,mutations,actions,getters,modules这几部分。下面对这几部分分别进行解释。
state: 页面状态管理容器对象。集中存储数据进行统一的状态管理。页面组件通信中显示所需的数据从该对象中进行读取。
mutations: 状态改变操作方法， 有actions中的commit来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
actions: 状态操作处理模块，通过$store.dispatch来触发。 然后由commit()来触发mutation的调用，达到更新state。负责处理Vue Components接收到的所有交互行为。 向后台API请求的操作就在这个模块中进行。
getters: 我们可以认为，getters是store的计算属性。
modules: 项目中不同模块可以分为不同modules来进行状态管理。

4.依赖注入-provide/inject

此方式允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。依赖注入是单向数据流，有统一分发数据的优势，合理使用能提供很大便利性。

// 以下为伪代码
// provide提供数据
// 祖父组件
<template>
    <div>
        ...
    </div>
</template>
<script>
    provide: {
        message: '依赖注入'
    },
    methods: {
        ...
    }
</script>
// inject注入数据
// 孙子组件
<template>
    <div>
        {{ message }}  // 显示依赖注入
    </div>
</template>
<script>
    inject: ['message'],
    methods: {
        ...
    }
</script>

5.parent/children与 ref

使用refs[组件名字]能更快的获取操作组件属性值或函数。
使用children[i].[组件名字] 来获取某个子组件的属性值或函数，$children返回的是一个子组件数组。
使用parent,子组件就可以获取修改父组件的数据内容。

以上就是vue通信的几种方式，关于vue3.0的一些变化本片文章后续会持续修改和更新。

avatar
文章
阅读
粉丝