Vuex组件通信

我们先了解Vuex 的五大核心

Vuex是一个专门为Vue.js应用设计的状态管理架构,统一管理和维护哥哥vue组件的可变化状态

Vuex有五大核心,state,getters,mutations,actions,modulse.文本将对这个五大核心概念进行梳理.

五大核心的意思:  

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

下面我们来讲组件之间的传值

1:父传子如何传递

首先我们在原有的项目基础目录上,创建一个文件夹,在文件夹里面写我们需要的子组件

我们先到父组件上用   import 自定义的名字 from '子组件的路径' 引入子组件 在用components: { }注册子组件

然后我到子页面用  props: ['自定义的名字']  用来传值,最后我们把子页面挂载到父页面上,我们通过props里面定义的名字进行传值即可,

例如,父页面:

html

<headewwr :content="recommend_cate"></headewwr>

js

import headewwr from '../../components/headewwr.vue'
data() {
			return {
				recommend_cate: [], //分类
				
			}
		},

components: { 	headewwr, }

子页面:

<view>内容</view>

js

export default {
		props: ['content']
	}

 

2:子传父通信

首先我们在父页面上的子组件标签上自定义一个事件,然后调用需要的方法

在子组件的方法中通过this.$emit('事件')来触发父组件中定义的事件,数据是以参数的形式进行传递的

3:兄弟组件通信

在src中新建一个bus.js文件,然后导出一个空的vue实例

在传输数据的一方引入bus.js,然后通过bus.$emit('事件','参数')来派发事件,数据是以$emit的参数形式来传递的

在接收的数据一方引入bus.js然后通过bus.$on('事件名',(data)='{data是接收的数据}')