复习MintUI
一、表单----复选框列表
1.<mt-checklist
title="标题"
options="['a','b','c']" #选项列表
v-model="val3" #val3=[ ]
>
</mt-checklist>
#注意事项:复选框列表 value保存数组
2.1 mint-ui组件中面板与底部导航条-(重点)
#由于移动端设备宽度问题,创建多个面板显示不同的
#商品信息,统一个时刻只能显示一个面板
#创建面板方式:一个父面板中间多个子面板,切换
#子面板
<mt-tab-container v-model="active"> 父面板
<mt-tab-container-item id="tab1">
子面板1
</mt-tab-container-item>
<mt-tab-container-item id="tab2">
子面板2
</mt-tab-container-item>
<mt-tab-container-item>
子面板3
</mt-tab-container-item>
<mt-tab-container>
#当active变量中保存tab1时显示tab1对应子面板
#创建新组建 Exam05.vue /Exam05
练习:
(1)创建新组建 Exam06.vue /Exam06
(2)添加三个按钮 "美食" "购物" "休闲"
(3)并且面板父面板与三个子面板
(美食子面板/购物子面板/休闲子面板)
(4)当用户点击某个按钮会显示对应子面板
<mt-tab-container v-model="active">
<mt-tab-container-item id=""tab1>
美食子面板
</mt-tab-container-item>
<mt-tab-container-item>
购物子面板
</mt-tab-container-item>
<mt-tab-container-item>
休闲子面板
</mt-tab-container-item>
</mt-tab-container>
2.2:mint-ui组件库底部导航条-(重点)
底部导航条按钮
(1)图片
(2)文字
(3)当点击按钮时显示指定面板
<mt-tabbar fixed v-model="active"> #父元素
<mt-tab-item id="tab1"> #按钮
<img src=""/> #图片
文字 #按钮下文字
</mt-tab-item>
<mt-tab-item id="tab2"> #按钮
<img src=""/> #图片
文字 #按钮下文字
<mt-tab-item>
</mt-tabbar>
#fixed将tabbar固定在底部导航条
#当用户点击某个按钮时,当时按钮id保存
active变量中
#创建新组件 Exam07.vue /Exam07
2.3:父子组件调用与数据传递
练习一:父组件调用子组件
Sub08.vue 子组件
Fa08.vue 父组件
#Fa08.vue(父) 调用 Sub08.vue(子)
(1)创建子组件 Sub08.vue
(2)创建父组件 Fa.vue
2.1:引入子组件
import Sub08 from "./Sub08.vue"
2.2:注册子组件并且起名字
components:{
"子组件起名字":子组件对象
"sub08":Sub08
}
#sub08子组件名字,全小写不要与标准重名
2.3:在模板中调用即可
<template>
<sub08></sub08>
</template>
#注意事项:子组件不用配置访问路径
var store=new Vuex.Store({
state:{age:23} 保存共享数据
mutations:{ } 保存函数用于修改共享数据
getters:{} 保存函数用户获取共享数据
action:{} 保存函数异步修改数据,
等待数据加载成功后,异步修改数据
})
#当前数据下载慢,立即修改 age = undefined 错误
#提高程序正确性
mutations:{ clear(state){ state.age=0 }}
action:{
#context 上下文对象=>store存储对象
modifyAge(context)=>{
setTimeout(()=>{
context.commit("clear");
},500)
}
}
如何调用定义在actions中方法
this.$store.dispatch("modifyAge");
