可视化大屏项目适配 vue（方案一）
选择的适配方案
设计稿是1920px
flexible.js 把屏幕分为 10 等份 ( flexible.js 中可修改 ，默认为 10 )
image.png
新建 vue 项目，项目目录如下
image.png
src / assets 文件下创建一个新的文件夹 css， css 文件夹下新建一个base.css文件用于定义全局样式
html,
body,
前端
在vite+vue中使用@originjs/vite-plugin-federation模块联邦
参考链接
webpack也有这个插件，比vite好用，vite不支持本地，必须要打包后开启服务才可以
先下载(只要用到的项目都需要进行下载)
npm install @originjs/vite-plugin-feder
vue - 组件通信
1. props/$emit
适用范围: 适合父子组件之间, 组件层级嵌套太深, 使用该方法较为繁琐,不建议使用;
代码示例:
image.png
总结:
props中接收到的值可以直接展示,但不建议直接对齐修改;
如果父组件向子组件传递的值是通过接口获取的, 可能会存在延迟的情况;
2. provide/inject
适用范围: 适用于多层次组件嵌套,通过provi
第四节:React组件状态的State属性
1. State状态理解
关于state的理解
state 是组件对象中最重要的属性,值是对象(可以包含多个数据)
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
state是组件实例的属性,函数组件没有实例,因为函数组件没有状态
state可以理解是组件自己的数据, props数据是外部传入,state数据就是组件自己的
2. State状态的使用
2.1
vuex和localstorage . cookie的区别
vuex是为了解决多组件之间的共享状态的一种状态管理模式, 强调集中式管理, 将所有的共享状态放在内存中, 读取速度快, 但是页面一刷新就恢复默认值了,
vuex的五大核心: state(存放数据的地方) , actions(发送异步请求)， getters(类似于computed计算属性), mutations(更改状态的地方), modules(组件模块化) 。其中, 更改状态只能在mutat
React-Hooks之useImperativeHandler
1.什么是useImperativeHandle Hook?
useImperativeHandle可以让你在使用ref 时自定义暴露给父组件的实例值,我的理解就是不让外界随便对通过ref拿到的元素进行操作，maybe我们可以称之为“权限配置"
这里出现了ref，小单简单地回顾一下前几天学习的useRef,可以知道ref就是帮助我们获取某个元素而设定的。
But!!!!!我记得当时说过useRef
