菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题: 冯文直-前端-20230210 [打印本页]
作者: 。5962 时间: 2023-2-11 14:51
标题: 冯文直-前端-20230210
一、今日学习内容：
1、祖孙组件传递数据
不能越级，只能一级级父传子，父传子，最后数据才从爷爷才传给了儿子。
2、父子组件传递数据和方法的位置：
在父组件模板中使用子组件的位置，这时候在父组件作用域呢，可以取出父组件中的data以及methdos赋值给子组件。
3、组件中的命名注意点：
注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"
在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
4、补充知识：驼峰命名
5、短横线命名法
6、组件其他通信方式
平行组件
在开发中,可能会存在没有关系的组件通信,⽐如有个博客内容显示组件,还有⼀个表单提交组件,我们现在提交数据到博客内容组件显示,这显示有点费劲.
为了解决这种问题,在vue中我们可以使⽤bus,创建中央事件总线
vm.$emit(eventName, ...args):触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on(): 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
7、组件多层嵌套 provide&inject
⽗组件 provide来提供变量,然后再子组件中通过inject来注⼊变量.无论组件嵌套多深
实际上，你可以将依赖注入看作是“long range props”，除了：
p 父组件不需要知道哪些子组件使用它 provide 的 property
p 子组件不需要知道 inject 的 property 来自哪里
7、什么是Vuex
Vuex是一个专门为vue.js设计的集中式状态管理架构。
状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
公共仓库，保存所有组件能共用的数据
8、为什么需要Vuex
企业开发中遇到的问题：组件之间共享数据
儿子想用祖先组件的数据，要层层传递。
兄弟组件之间想要传递数据,也要借助父组件。
9、使用Vuex统一管理好处
能够在Vuex中集中管理共享的数据，易于开发和后期维护
能够高效地实现组件之间的数据共享，提高开发效率
存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步
状态管理
单页面状态管理
State：指的就是我们的状态，可以暂时理解为组件中data中的属性
View：视图层，可以针对State的变化， 显示不同的信息
Actions：这里的Actions主要是用户的各种操作，如点击、输入等，会导致状态发生变化
10、state使用
1 导入Vuex.js
2 创建Vuex对象
3 给祖先组件加入store属性
4 页面中使用store中数据
导入Vuex.js
必须在引入Vue之后再引入Vuex
注意点：
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
11、Vuex修改数据
Mutation用于变更存储在Store中的数据。
只能通过mutation变更Store数据，不可以直接操作Store中的数据
通过这种方式，虽然操作稍微繁琐一些，但可以集中监控所有数据的变化，直接操作Store数据是无法进行监控的
12、Mutation响应规则
Vuex的store中的State是响应式的，当State中的数据发生改变时，Vue组件也会自动更新。
Action
Action类似于Mutation，但是是用于处理异步任务的，比如网络请求等
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但在Action中还是要通过触发Mutation的方式间接变更数据。
这个在后面项目中介绍使用。
Vuex获取数据
getters 定义：Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。
就像vue生命周期中的computed一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
二、今日问题：无
三、解决方案：无
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) |
Powered by Discuz! X3.4 |