VUE参数传递（VUE4）

1.Vue 组件间通信有哪几种方式？

https://juejin.im/post/5cde0b43f265da03867e78d3
（1）props / $emit 适用 父子组件通信
（2）ref 与 $parent / $children适用父子组件通信（3）EventBus（$emit / $on）适用于父子、隔代、兄弟组件通信（4）$attrs/$listeners 适用于 隔代组件通信
（5）provide / inject 适用于 隔代组件通信
（6）Vuex 适用于 父子、隔代、兄弟组件通信，
https://blog.csdn.net/wh710107079/article/details/88181015

2. js存储方式cookie/sessionStorage/localStorage/indexedDB区别用法

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

注意事项：

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；
https://blog.csdn.net/qq_29132907/article/details/80389398

cookie用法：

https://www.cnblogs.com/liugx/p/7508675.html
在chrome控制台中的resources选项卡中可以看到cookie的信息。
name字段为一个cookie的名称。
value字段为一个cookie的值。
domain字段为可以访问此cookie的域名。
path字段为可以访问此cookie的页面路径。
Size字段 此cookie大小。
https://blog.csdn.net/mf_717714/article/details/84233625
https://blog.csdn.net/qq_29132907/article/details/80390792
vue项目使用cookie进行储存数据
[https://blog.csdn.net/weixin_41646716/article/details/80439904]
VUE中封装cookie
https://blog.csdn.net/weixin_41646716/article/details/80439904

3.VUEX的用法

vue解决刷新页面vuex数据、params参数消失的问题（params传递多个参数）

https://blog.csdn.net/xr510002594/article/details/84302734
显式替换存储状态：this.$store.replaceState
vuex用法：
https://blog.csdn.net/weixin_35955795/article/details/57412181?ops_request_misc=&request_id=&biz_id=102&utm_source=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0
state.js存储数据

module.exports = {
  usecard: '',
  givescorememberName: '',
};

mutation.js更改数据

module.exports = {
  GIVESCOREMEMBERNAME:(state,payload)=>{
    state.givescorememberName=payload;
  },
};

存储数据原生用法

this.$store.commit('GIVESCOREMEMBERNAME',aaa);

更改数据原生用法

this.givescorememberName=this.$store.state.givescorememberName;

存储数据解构用法

  import {mapMutations} from 'vuex';

methods:{
      ...mapMutations(["GIVESCOREMEMBERNAME"]),
      this.GIVESCOREMEMBERNAME(aaa);
    },

更改数据解构用法

  import {mapState} from 'vuex';

computed:{
      ...mapState(['givescorememberName']),
    },

4.query和params的区别

https://blog.csdn.net/mf_717714/article/details/81945218