Vue 组件传值+vue 实现组件缓存

85 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天
一、Vue 组件传值
1.父组件向子组件传递数据
父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数 props 接收即可

2.子组件向父组件传递数据
子组件通过 vue 实例方法$emit 进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理

3.非父子组件之间传递数据
1)引入第三方 new vue 定义为 eventBus
2)在组件中 created 中订阅方法 eventBus.on("自定义事件名",methods中的方法名)<br>3)在另一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法eventBus.on("自定义事件名",methods 中的方法名)<br> 3)在另一个兄弟组件中的 methods 中写函数,在函数中发布 eventBus 订阅的方法eventBus.emit("自定义事件名”)
4)在组件的 template 中绑定事件(比如 click)

二、vue 实现组件缓存
在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合理的方式组织起来,那么自然会存在组件之前切换的问题,vue 中有个动态组件的概念,它能够帮助开发者更好的实现组件之间的切换,但是在面对需求频繁的变化,去要切换组件时,动态组件在切换的过程中,组件的实例都是重新创建的,而我们需要保留组件的状态,为了解决这个问题,

需要使用到 vue 中内置组件 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染,

简答的说: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keepalive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染