一、学习内容
祖孙组件传递数据
不能越级,只能一级级父传子,父传子,最后数据才从爷爷才传给了儿子。
父子组件传递数据和方法的位置:
在父组件模板中使用子组件的位置,这时候在父组件作用域呢,可以取出父组件中的data以及methdos赋值给子组件。
组件中的命名注意点:
注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"
例如: 注册时: MyFather(js) -> 使用时: <my-father>(html)
在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
例如: 传递时: parent-name="uname" -> 接收时: props: ["parentName"]
在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
@parent-say="say" -> this.$emit("parent-say");
组件其他通信方式
平行组件
在开发中,可能会存在==没有关系的组件通信==,比如有个博客内容显示组件,还有⼀个表单提交组件,我们现在提交数据到博客内容组件显示,这显示有点费劲.
为了解决这种问题,在vue中我们可以使⽤event bus,创建中央事件总线
vm.$emit(eventName, ...args):触发==当前实例上==的事件。附加参数都会传给监听器回调。
vm.$on(): 监听==当前实例上==的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
组件多层嵌套 provide&inject
⽗组件 provide来提供变量,然后再子组件中通过inject来注⼊变量.无论组件嵌套多深
实际上,你可以将依赖注入看作是“l·”,除了:
父组件不需要知道哪些子组件使用它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里
什么是Vuex
Vuex是一个专门为vue.js设计的==集中式状态管理架构==。
状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。
公共仓库,保存所有组件能共用的数据
使用Vuex统一管理好处
- 能够在Vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在Vuex中的数据都是响应式的,能够实时保持数据与页面的同步
state使用
1 导入Vuex.js
2 创建Vuex对象
3 给祖先组件加入store属性
4 页面中使用store中数据
|