携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第14天,点击查看活动详情
图片流不展示问题、父子孙组件间传参(localStorage。sessionStorage。Bus。eventBus。vuex。emit。props。refs。parent等还有个minis还是啥的忘了)
1.localStorage存储会把存储的数据转为字符串类型
localStorage.setItem('isBool',true) // 存储
localStorage.getItem('isBool') // 获取 'true'
2.图片流不展示问题
用常量来判断选用那种图片作为背景
data对象中新增 photo:require('图片地址')
用switch判断方法+ this.$refs.xxxx.style='background:url(this.photo)'
因为打包会把图片变成流的形式,所以需要图片地址需要用require的形式来引入图片地址
否则 就用样式class去修改判断 :class="{bg1:status,bg2:!status} bg1/bg2是class类名 status是data中定义的布尔值 (但是对比 switch方法 ,class有局限性,不能比较太多)
3.组件传参
点击链接可查看-------->vue中调用方法时传参_vue中8种组件传参方式
1. localStorage/sessionStorage存储
2. vuex
3. Bus
一、前言
使用场景:在vue项目较小的情况,使用bus总线思路来完成vuex的传值功能。
二、内容
//bus.js
import Vue from "vue";
const Bus = new Vue();
export default Bus;
//组件A、组件B中分别引入Bus
import Bus from "bus.js的路径";
//组件A中绑定事件,来接收组件B传来的数据
//绑定事件
Bus.$on("绑定事件",data=>{
console.log()
})
//组件B中触发事件,将数据传递给组件A
//触发绑定事件,进行兄弟组件间的参数传递
Bus.$emit("绑定事件",data);
//组件A中使用
//解除绑定事件,一般在beforeDestory生命周期中使用
Bus.$off("绑定事件")
总结:
Vue-Bus是一种总线思想,即各个兄弟组件通过Bus(即Vue实例)进行参数传递!
4. eventBus
5. 父组件传参----子组件用props接收
6.$refs
7.$children / $parent
4.子传父
child子:this.$emit('B',val)
parent父:<child @B='B'/>
B(v){
console.log('接收子组件的值',v)
}