Vue组件之间的多种通信方式 $emit和props、mapState和mapMutations、$ref和$refs

Vue组件间的通信方式 $ emit props、mapState、mapMutations 、$attr $ref 和 $refs

在使用Vue进行复杂组件开发的时候，难免会遇到组件间的传递的问题，下面是几种常见的组件通信方式、第一种emit、prop 配合是最常用的方式，另外还有就是 r e f 和 ref 和 ref和refs进行控制，还有就是通过缓存机制的Vuex 的mapMutationsmapState 进行同步通信

一、父组件与子组件之间传递 prop 传递数据 $emit 事件（单双层页面传递）

一般简单的页面，我们用prop和emit,单个页面的时候使用，父组件通过prop 将父组件数据进行传递到子组件，子组件 通过$emit自已的事件， 多层也可以用，但是不推荐使用会影响效率
具体代码实现代码

// 父组件  id 就是对应子组件的props里的值    clo函数就是接受子组件上的@close 事件，        
	
	clo(e){
		console.log(e)   //输出 '关注点赞走一走'
	}	
-----------------------------------------------------------------------------------------------------------
// 子组件   在props中定义id  使用时用this.id 即可
export default {
		props: { id: String },
}
//  在自定义函数里 调用 this.$emit()     第一个参数为函数绑定名称 ，后面的参数均为变量，变量 传递事件过去
cancel() {
	this.$emit('close'，'关注点赞走一走');
}
-----------------------------------------------------------------------------------------------------------

二、不同页面相互之间通信 ，Vuex的 mapState mapMutations（多页面公用）

首先Vux 的原理是同步执行的，就是你的赋值会同步进行，这样所有的页面都可以通过vuex 进行使用，mapMutations 是用来设置值的，mapState 是用来获取值的

第一步我们需要在store 文件夹下定义自己的 task.js ，文件ask 文件夹代码如下

const taskState = {
	// 解决不同模块命名冲突问题
	namespaced: true,
	//用于定义
	state: {
		lrpId: "11'', //项目ID
	},.
	// 用于设置变量的函数
	mutations: {
		setLrpId(state, value) {
			state.lrpId = value;
	},
	//用于获取
	getters: {
		getLrpId: (state) => state.lrpId,
	},
	actions: {},
	modules: {}
};
export default taskState;

第二步 将自定义文件task 引入store下的index.js全局
我们需要把自己的文件绑定到vue 上，并且为它创建vuex实例

import task from './taskManagement';
Vue.use(Vuex);
export default new Vuex.Store({
	modules: { test, task }
});

第三步 在需要使用的页面 通过 createNamespacedHelpers 将对应的方法引入
我们通过Vuex里的createNamespacedHelpers 方法创建 mapState 和 mapMutations

//按照需求引入 自己的定义的文件夹
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('task');
const { mapMutations } = createNamespacedHelpers('task');

export default {
	computed: {
		...mapState({
			//获取vuex里state数据
			taskManagement: (state) => state
		}),
	},
	methods: {
		//引入vuex 里mutations 方法
		...mapMutations(['setLrpId']),
		}
}

第四步使用
使用上面引入的方法即可

		// 获取task 文件下 state定义的lrpId的初始值
		console.log(this.taskManagement.lrpId)  //打印为11
		//进行赋值为22
		this.setTaskId('关注点赞走一走');
		// 获取task 文件夹里state 的值     ( )
		console.log(this.taskManagement.lrpId)  //打印为 '关注点赞走一走'

三、通过dom 进行通信$ref 和 $refs 方法 （父组件对子组件的控制）

这种方式的好处是避免数据不刷新问题 ,父组件可以通过$ refs 直接调用子组件身上的data（）{}变量里的数据 已经methods 里的方法

 //father页面
 
 created(){
 	//获取数据	
 	console.log(this.$ref.son.value)   //输出  '关注点赞走一走'
 	// 调用方法  
 	this. $ refs. print()     // 输出 打印方法'关注点赞走一走'
 }
 --------------------------------------------------------------------------------------------
//son页面
export default {
   data(){
   reture:{ 
   value:''关注点赞走一走'
   }
   },
   methods: {
   	print(){
   		console.log('打印方法'+this.value)
   	}
   }
}