组件的传参
父传子 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提供数据