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 事件，
<ProjectDetail :id="projectDetailId" @close='clo'></ProjectDetail>
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页面
<son ref="son"></son>
created(){
//获取数据
console.log(this.$ref.son.value) //输出 '关注点赞走一走'
// 调用方法
this. $ refs. print() // 输出 打印方法'关注点赞走一走'
}
--------------------------------------------------------------------------------------------
//son页面
export default {
data(){
reture:{
value:''关注点赞走一走'
}
},
methods: {
print(){
console.log('打印方法'+this.value)
}
}
}
