1. props 传递数据,父组件传递给子组件,在使用子组件时通过标签中字面量来传递值
父组件:<Children data1="a" data2="12" />
子组件:
props: {
data1: String, // 接收的类型为字符串形式
data2: {
type: Nmber, // 接收的参数类型为数字类型
default: 18, // 默认值
required: false, // 是否必传
}
}
2. $emit 子组件反馈给父组件的方法
父组件:<Children @dopost="send" />
// 父组件的dopost方法可以获取子组件传来的参数 “send data”
子组件: this.$emit("send", "send data")
3. 使用ref,父组件直接获取子组件
父组件:<Children ref="children" />
获取子组件: this.$refs.children 或 this.$refs["children"]
4. EventBus 兄弟组件通信
建立一个中央事件总线 EventBus,待研究 TODO
5. parent或root
通过共同祖辈 $parent 或者 $root 搭建通信桥连
兄弟组件:this.$parent.on("add", this.add)
另一个兄弟组件:this.$parent.emit("add")
6. attrs与listeners
祖先传递数据给子孙
7. Provide与Inject
在祖先定义provide属性,返回传递的值
在后代组件通过inject 接收组件传递过来的值
8. Vuex
复杂关系的组件数据传递,vuex相当于一个用来存储共享变量的容器。
state: 用来存放共享变量的地方
getter:
mutations:
actions:
优点:
- 在vuex中,集中式存储和管理共享的数据,便于开发和维护
- 能够高效的实现组件之间的数据共享和传输,提高开发效率(就不用管是父子组件传值还是兄弟组件,还是祖先后代,直接高效的传值)
- 存储在vuex中的数据都是响应式的,能够实时的保持数据和页面的同步(比如localstorage就是办不到的)
缺点:刷新后存储数据会丢失,
解决办法:插件vuex-persistedstate
可以借助localStorage/sessionStorage进行存储
在刷新前将vuex中的数据直接保存到浏览器缓存中,页面刷新后,在页面刷新的时候获取缓存数据,使之动态更新vuex数据,
具体步骤:vuex更新时同时出发浏览器缓存,确保刷新之前的缓存数据为最新,在页面刷新时,优先调用缓存数据更新vuex,若接口提供了最新数据则调取接口更新。