图片流不展示问题+父子孙组件间传参

45 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第14天,点击查看活动详情

图片流不展示问题、父子孙组件间传参(localStorage。sessionStorage。Bus。eventBus。vuex。emit。props。refs。children/children / 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实例)进行参数传递!

点击此文字----可查看bus原文

4. eventBus

点击可查看----eventBus详解

5. 父组件传参----子组件用props接收

6.$refs

点击可查看----父组件与孙子组件之间传值解决方法

7.$children / $parent

点击可查看----详解

4.子传父

child子:this.$emit('B',val)
parent父:<child @B='B'/>
          B(v){
            console.log('接收子组件的值',v) 
          }