组件传参
子传父 事件$emit
引用父组件$parent
引用组件
$children
$refs
引用根组件
$root
根组件 最大组件
事件bus传参
跨层级访问数据(非父子关系)($on、 $off、 $emit)
1.创建bus.js
import Vue from 'vue'
var bus = new Vue();
export default bus;
2.在要发送数据的组件中导入bus并使用bus.semit
3.在有接收数据的组件中导入bus并使用bus.$on (注意this)
注意:任意组件只要导入bus就可以随意的发送与监听数据
provider 和inject
依赖注入{跨层级访问(只读)}
provide 提供数据
所有子孙都可以通过inject注入数据
inject 接收父辈组件提供的数据
VueX
概念解释
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中
1.登录后成功的数可以全局共享
2.为了重复利用(登录功能可能不止在登录页面)
1.首页点击弹框登录
2.购物车跳转前,弹框登录
3.登录位置会有很多
如果写在Vuex只需要在登录地方;$store.dispatch"login",data)方法就可以
为什么要写apilogin.js (定义api呢)
重复利用
登录的api也会调用多次
方便集中管理
所有的请求地址与请求方式api文件中。
改请求方式与参数可以直接修改api内容就可以,不用具体进
入到某个组件。