小白一看就会的组件传参和Vuex

组件的传参

父传子 props
子传父 事件$emit
引用父组件$parent
引用子组件 $children/$refs
引用根组件 $root 最大组件

事件bus传参

跨层级访问数据(非父子关系)($on$off$emit

1.创建bus.js

import Vue from 'vue'
var bus = new Vue();
export default bus;

在要发送数据的组件中导入bus并使用 bus.$emit

在有接收数据的组件中导入bus 并使用 bus.$on (注意this)

注意:任意组件只要导入bus 就可以随意的 发送与监听数据

bus.$on(eventname,callback) 监听事件 bus.$emit(eventname,data)发送事件 bus.$off(eventname)移除事件
provider和inject

依赖注入
跨层级访问(只读)
inject 接收父辈组件提供的数据

Vuex

state(存放状态)
$store.state.xxx访问
mutations(改变状态的唯一方法)
$store.commit("XXX",data)
actions(异步操作数据的方式)
changescore(context,data){
 //在actions中访问mutations
 context.commit("SET_SCORE",data)}
$store.dispatch( xxx",data)
getters(从现有的状态计算出新的数据)
 level(state){
 return state.user.score/100
 }
$store.getters.xxx
moudel 子模块
把登录功能放在store/moudules/userjs actions中
loginView.vue页面执行登录
实现store/modules/user.js实现注销
实现登录成功提示,登录失败提示
为什么要把登录转换到vuex中
为什么要把登录转换到vuex中
登录后成功的数可以全局共享
  • 为了重复利用登录功能可能不止在登录页面

  • 首页点击弹框登录

  • 购物车 跳转前,弹框登录

  • 登录位置会有很多

  • 如果写在Vuex只需要在登录地方 $store.dispatch(“login”,data) 方法就可以
    为什么要写api/login.js (定义api呢) 重复利用 登录的api也会调用多次

  • 方便集中管理

  • 所有的请求地址与请求方式 api文件中 改请求方式与参数可以直接修改 api内容就可以,不用具体进入到某个组件

  • provide提供数据

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值