Vue3组件（18）组件间传值/共享的方法的汇总

Posted 2023-05-05

参考技术A 目前只能想到这些了，对了，还有事件总线这类的就不考虑了。

最基础的方式，适用于 父组件和子组件之间的直接传值，多用于基础控件，比如input、el-input、el-select这类。
比较基础不多介绍了。

老牌的状态管理方式，各种组件之间各种传值，好吧专业术语叫做状态管理。

使用方法呢，其实就是一层窗户纸，捅破了大家就都知道了，这里不介绍了，可以看我的文集：
https://www.jianshu.com/nb/49384194

这个不是前端存储吗？也可以共享数据？

当然可以了，只是没有响应性而已。
使用方式可以参考这里： https://www.jianshu.com/p/607c01749168
当然也可以用其他第三方的封装类来管理。

Vuex挺强大的，只是有个小问题，不支持状态的保存，比如一刷新状态就没了，更不用提关掉网页等操作了。

那么如果我想长期保存状态呢？这时候就需要用到前端存储，比如localStrage或者indexedDB。

Vuex + 前端存储，二者配合起来就更强大了。

indexedDB的特点是可以长期保存数据，而且容量很大，那么是不是可以把字典数据存进来呢？然后让state来加载这些数据，这样的话就不用每次（打开页面）都到后端去获取数据。
既快捷又减轻后端的压力。

这个还是很简单粗暴的，目前正在研究，应该可以实现代替 Vuex 的数据状态管理方案。

因为Vuex不太适合Vue3的环境，应该可以有替代方案了。
在这里探讨了一下： https://www.jianshu.com/p/25b8e8a7e319
当然还很粗糙，距离完善还有很长的路要走。

这个家伙怎么也来了？跑错片场了吧。

其实不然，可能大家早就在默默的使用这种方式了。

比如博客网站，打开一篇博文，看着兴起写了一个讨论发了出去。

这时候讨论组件会把讨论数据提交给后端，后端处理后返回给前端，讨论组件得到确认回复后，是不是要告诉讨论列表组件：你有新的消息，请注意更新一下。

这是讨论组件就会向后端API申请新的讨论列表数据。

这样看来，讨论数据是不是经由后端API传递给另一个组件的呢？

好吧，有点杠的味道，但是原理就是这样的，我是想告诉大家，不要限制思维，发散一下总不会有错。

可能有人会说，你这是古老的思路，完全不懂现在的前端开发的思想，还。。。。

好吧，还是上面的例子，稍微改一下流程。

讨论组件向后端API提交数据的同时，把讨论数据共享给列表组件，列表组件不管三七二十，先显示了再说。

这样用户可以在第一时间在讨论列表里面看到自己发的讨论信息。

但是这还没有完，后端有没有成功保存讨论呢？

讨论组件得到后端的回复之后，还要做一下处理：
1、如果成功了，告知讨论组件新的讨论数据的ID
2、如果失败了，告知讨论组件，刚才的那条讨论数据没成功，你得通知用户。

讨论组件也要做相应的处理。
1、如果得到成功的通知，设置新的ID，为删除操作提供ID，否则删除操作咋办。
2、如果得到失败的通知，要告知用户失败了，并且问问用户，是否重发。

然后还有个小问题，如果讨论非常激烈，又有几个新的讨论出现了，那么什么时候更新这些讨论？是让用户手动更新，还是自动更新，还是讨论组件提交数据后，后端自动判断是否有新的讨论，如果有，一起返回给前端？

好像跑题了。

总之要设计好一个应用，各种细节问题，用户交互问题，都是需要考虑的。果然跑题了。。。

vue组件间传值

父组件向子组件传递数据

// 父组件传递
<dialogAttendee :dialogcascaderVisible="dialogcascaderVisible"></dialogAttendee>

// 子组件接接收
props:{  
    dialogcascaderVisible: {
        type: Boolean,
        default: false
    },
    reservation: Array,
}

父组件改变子组件中的数据

// 父组件中引用子组件
<son ref="son"></son>

// 父组件的点击事件
clickFunc(){
    // 更新子组件里a的值
    this.$refs.son.a = ‘xx‘;
    // 调用子组件里b方法
    this.$refs.son.b();
}

子组件调用父组件方法并向父组件传值

// 子组件触发事件
this.$emit(‘emitEvent‘, ‘123‘);

// 父组件
// 引用子组件并绑定方法
<part-template @emitEvent = "ievent"></i-template>
// 设置方法
methods:{
    ievent(data){
        console.log(‘allData:‘, data); 
    }
}

兄弟组件间传值

1 vuex

2 eventBus

// eventBus.js文件
import Vue from ‘vue‘;  
export default new Vue(); 

// 使用的组件首先引用这个文件
import Bus from ‘../../assets/js/eventBus‘

// 引用之后绑定函数，或触发已绑定的函数
// 绑定事件
Bus.$on(‘setData‘, param => {
    this.initShare(shareInfo,this);
}); 
// 触发时间
Bus.$emit(‘setData‘, 1);