props的其它内容
props的作用就是用于在子组件中接收传入的数据
props的使用方式
1.数组
props:['name']
2.对象,指定传入变量的类型
props:{name:Number}
3.对象，传入变量有类型、默认值和必填
props: {
name: {
type: String, # 类型
required: true, # 必填
default: '' # 默认值
}
}
混入 mixin
mixin的作用就是将多个组件共用的配置提取成一个混入对象，其实就是将多个组件都能用到的配置提出来放到一个文件中，并导出，谁要用就导入
使用步骤
1.定义混入对象
新建mixin包，在mixin包下新建index.js
2.在index.js中写组建中会用到的配置项，如data,methods等
export const zyg = {
methods: {
},
mounted() {
},
data() {
return {
}
}
}
3.局部使用(只在当前组件中使用)
import {zyg} from '@/mixin'
mixins: [zyg] # 配置项
4.全局使用(所有组件都能用)
在main.js中
import {zyg} from '@/mixin'
Vue.mixin(zyg)
5.在组件中直接使用即可
插件
插件主要就是用于增强Vue
他其实就是一个包含install方法的一个对象，install的第一个参数时vue，第二个以后的参数是使用插件的时候传递的数据
使用方法
1.新建包plugins，在包中新建index.js
import Vue from 'vue';
import axios from 'axios';
export default {
install(vue) {
# 1.自定义指令
# 2.定义全局变量，之后所有组件都能用，借助于Vue.prototype往里放，以后只需要this.$ajax，就是axios对象
# 3.使用全局混入
# 4.自定义全局组件
}
}
2.在main.js中配置
import plugin from '@/plugins'
Vue.use(plugin)
elementui的使用
1.安装
cnpm i element-ui -S
2.配置完整引入，在main.js中写以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
以后就可以在组件中直接使用elementui提供的全局组件
3.使用组件
elementui官网复制粘贴
vuex
vuex就是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
使用步骤
1.安装
新建store包，新建index.js
2.在index.js中写
export default new Vuex.Store({
state: {
# 放数据的
},
mutations: {
# 放一个方法，正常是让actions中的方法来调用
# 组件也可以直接调用
},
actions: {
# 放方法，正常组件调用
}
})
3.组件中
显示state中的变量
html:
{{$store.state.变量名}}
js:
this.$store,state.变量名
4.修改state中变量的值
正常步骤:
1.组件中js
this.$store.dispatch('actions中的方法', 参数)
2.actions中的方法调用
context.commit('mutations', 参数)
actions: {
add(context, value) { # context为固定参数，value为接收的参数
context.commit('aaa', value) # aaa为mutations中的方法
}
}
3.在mutations中修改state的值
mutations: {
aaa(state, value) { # state 是Store中的state
}
}
非正常步骤:在没有网络请求或其它业务逻辑时使用
1.跳过actions
this.$store.commit()
2.直接改值
this.$store.state.变量名
vuex在执行时actions可以与后端交互
vuex可以用于多组件数据共享
vue Router
1.基本使用
1.创建项目时就已经创建好了直接使用即可
2.配置路由跳转
const routers = [
{
path:'/',
name: 'index',
component: Indedx # 已经提前导入了import Index from "@/views/IndexView";
},
{
path: '/home',
name: 'home',
component: () => import('@/views/HomeView') # 没有提前导入
}
]
2.点击跳转路由的两种方式
1.js控制
this.$router.push('路径')
2.标签控制
<router-link to="/路由">
<button>点击跳转页面</button>
</router-link>
3.路由跳转携带数据的两种方式
1.在路径中使用?携带
/index/?pk=1
获取pk: this.$route.query.pk
2.路径中分割
/index/1/
使用这种方式router的index文件中对应的路径要改
{
path: '/index/:id',
name: 'index',
component: Index
}
获取id: this.$route.params.id
4.区分this.$route与this.$router
this.$route # 是当前路由对象，内部有传入的参数
this.$router # mew VueRouter对象，可以实现路由的跳转，router文件中的index.js文件中
5.两种跳转方式
1.使用对象
this.$router.push({
name: 'index',
params: {
id: 18
}
})
2.标签跳转
<router-link :to="{name:'login', query: {name: 'zyg'}, params: {id: 18}}">
<button>点击跳转</button>
</router-link>
6.路由守卫
全局守卫
前置路由守卫，在进路由前执行
后置路由守卫，路由跳转走执行
用法:
router文件的index.js中
router.beforeEach((to, from, next) => { # to是去哪个路由，from是从哪个路由来，next加括号执行
if (to.name == 'login') {
next() # 真正跳转到要去的路径
} else {
var res = localStorage.getItem('userinfo')
if (res) {
next()
}else {
alert('')
this.$router.push({name: 'login', params: {id: 99}})
}
}
})
localStorage系列
localStorage系列主要是用于浏览器存储数据，只是存储数据的方式不同
localStorage
永久存储，除非清空数据或手动删除、代码删除
localStorage.setItem('userinfo', JSON.stringify(this.userInfo)) # 存数据
localStorage.getItem('userinfo') # 取数据
localStorage.clear() # 清空全部数据
localStorage.removeItem('userinfo') # 清空userinfo的数据
sessionStorage
临时存储，清理需要关闭浏览器或手动删除、代码删除
sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo)) # 存数据
sessionStorage.getItem('userinfo') # 取数据
sessionStorage.clear() # 清空全部
sessionStorage.removeItem('userinfo') # 清空userinfo的数据
cookie
有过期时间，到期自动清理，而且需要借助第三方模块 vue-cookie
cookies.set('userinfo', JSON.stringify(this.userInfo)) # 存数据
cookies.get('userinfo') # 取数据
cookies.delete('userinfo') # 删除数据
