父子组件的通讯
- 1.父组件通过prop向下传递,
- 接收方,子组件中声明props
props:['goodsId',goodsCount]
- 传值方,父组件
- 导入子组件
import inputnumber from '..'
- template中使用
<inputnumber :goodsId="" :goodsCount="" />>
- 在components中注册
- 导入子组件
- 接收方,子组件中声明props
- 2.子组件通过事件向上传递
- 接收方,父组件中写好v-on监听事件,并写好处理函数
@countChange="getChangeCount"
- 把子组件的数量赋值给父组件数量
getChangeCount(goods){}
形参接收子组件传递的数据
- 把子组件的数量赋值给父组件数量
- 传值方,子组件使用$emit()触发事件,传递payLoad
this.$emit('countChange',goods)
- payLoad{goodsId:”87”,goodsCount:2}
- 接收方,父组件中写好v-on监听事件,并写好处理函数
vuex 的使用
- 什么是vuex? 可理解为仓库,专门为vue.js开发的状态(数据)管理模式
- 跨组件通讯,多个组件都需要操作一个数据
- 使用: 1.安装; 2.导入,Vue.use();3.
const store = new Vuex.Store()
创建一个仓库对象; 4.注入到根实例,就有全局状态管理功能 核心概念:
- state 仓库中的数据
buyCount:0
- getter 仓库中获取数据 模板中
{{this.$store.getters.getBuyCount}}
- mutation 同步的方式操作数据的增删改
action 异步的方式操作数据的增删改
module 需要创建多个仓库时
- state 仓库中的数据
购物车的数量修改
- 1.利用计算属性原理,父子组件的修改数量,实现页面总数和总金额的同步;
- 2.更新全局的buycount (用vuex);
- shopcart.vue–>main.js的mutations中的updateGoods方法,在updateGoods中–>localStorageTool中updateLocalGoods方法
- 上面方法更新完毕后 将localStorage中最新的值返回给vuex中的buyCount(自动更新app.vue中的购物车总数)
- 3.更新localStorage中的id和数量;
对象的增加和改值方法
* var obj=[“89”:2,”88”:3]
* 改值 obj[“89”]=5 //[“89”:5,”88”:3] 存在key就是改值
* 增加 obj[“78”]=2 //[“78”:2,”89”:5,”88”:3] 不存在key就增加
* 删除 delete obj[key];
删除购物车商品(同修改购物车商品数量)
- shopcart.vue中添加点击事件deleteGoodsById, 传入item.id
@click="deleteGoodsById(item.id)"
- main.js中调用mutations中deleteGoods方法
- localStorage中deleteLocalGoods方法
- 返回vuex中最新的buyCount值
生命周期钩子函数
- created 组件创建完毕
- mounted 组件渲染完毕 (通常需要增加延时setTimeOut)
- updated 数据更新时
声明式 编程式导航(路由)
- 声明式
<router-link to...>
写在组件模板template中 编程式
router.push(...)
写在js中 通过this.$router.push(…)来触发路径route和 r o u t e 和 router区别: route:获取路径中得参数; r o u t e : 获 取 路 径 中 得 参 数 ; router:编程式导航
导航守卫解决权限问题
- 进入到需要权限的组件(order.vue),首先判断是否登录,如果登录,就跳转到订单详情页面;没有登录,跳转到登录页面,登录成功后跳转到目标页面;
需要解决以下几个问题?
- 1.对所有路由进行拦截
导航守卫实质是一个函数,当我们有路由切换时,就会调用该函数 - 2.判断是否登录; 已经登录,跳转到订单详情页面;否则跳转到登录页面,登录成功后跳到目标页面
- 1.对所有路由进行拦截
使用:
const router = new VueRouter({})
router.beforeEach((to, from, next) =>{}
每次路由切换时会触发
- to:Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: 决定你是否能继续往下走,可以理解成是一个开关
meta: { requiresAuth: true }
给路由规则添加额外条件 判断是否需要权限to.meta.requiresAuth
判断是否直接next()
,
- 如果不是, 判断是否登录,没有登录
next('/login')
;已经登录next()
- 如果不是, 判断是否登录,没有登录
登录组件(main.js中需要设置开启cookieaxios.defaults.withCredentials=true;
)
- 获取表单输入的内容
- 发起请求
- 返回数据发送
bus.$emit('isLogin',true)
- App.vue中获取
bus.$on('isLogin',function(isLogin){})
登出
- 提交get请求
- 退出成功
this.isLogin=false
this.$router.push{path:'/goodslist'}
回到商品列表
非父子组件通讯 (login.vue 和 App.vue)
创建新的的Vue 作为事件的总线(公共的Vue对象)
// 触发组件 A 中的事件 (发送方login.vue)
bus.$emit(‘id-selected’, 1)// 在组件 B 创建的钩子中监听事件 (接收方App.vue)
bus.$on(‘id-selected’, function (id) {
// …
})