组件传参
父传子 props
子传父 事件$emit
引用父 组件$parent
引用子组件
$children
$refs
引用根组件
$root //根组件 最大组件
事件bus传参(跨层级访问数据)(非父子关系)
-
- 创建bus.js
import Vue from 'vue'
var bus = new Vue();
export default bus;
-
- 在要发送数据的组件中导入bus并使用
bus.$emit
- 在要发送数据的组件中导入bus并使用
-
- 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)
bus.$on(eventname,callback) 监听事件
bus.$emit(eventname,data)发送事件
bus.$off(eventname)移除事件
注意:任意组件只要导入bus 就可以随意的 发送与监听数据
provider和inject依赖注入跨层级访问(只读)
- provide提供数据所有子孙都可以通过inject注入数据
- inject 接收父辈组件提供的数据
Vuex基础
解释
- Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
- Vuex 实现数据的全局共享,响应式更新
- 能够在vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享, 提高开发效率
- 存储1在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
- 一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。
定义store对象
import Vue from 'vue' //导入
import Vuex from 'vuex'
Vue.use(Vuex) //使用
export default new Vuex.Store({ //创建store对象
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
//(4).将store对象挂载到vue实例中
new Vue ({
el: '#app',
render: h => h(app) ,
router ,
//将创建的共享数据对象,挂载到vue实例中,所有的组件,就可以直接从store 中获取全局的数据了
store
})
// store仓库 ,state状态(数据),getters获取器,
// mutations变异改变,actions动作 ,modules模块
state(存放状态)
$store.state.xxx访问
mutations改变状态的唯一方法
SET_SCORE(state,data){}
$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只需要在登录地方使用
$store.dispatch("login",data)
方法就可以
为什么要写api/login.js (定义api呢)
- 重复利用
- 登录的api也会调用多次
- 方便集中管理
- 所有的请求地址与请求方式 api文件中
- 修改请求方式与参数可以直接修改 api内容就可以,不用具体进入到某个组件