slot插槽使用
1.匿名插槽
在父组件引用的子组件的内部写入内容，在子组件中可以使用该内容
父组件：
<template>
<Child>
<p>给子组件的内容</p>
</Child>
</template>
子组件：
<template>
<div class='child'>
<slot></slot>
<p>上面是父组件slot传的内容</p>
</div>
</template>
浏览器查看输出：
给子组件的内容
上面是父组件slot传的内容
2.具名插槽
在父组件给子组件多个内容的时候，设置slot属性，子组件使用带有name的solt标签使用对用内容
父组件：
<template>
<Child>
<p slot='child1'>第一个给子组件的内容</p>
<p slot='child2'>第二个给子组件的内容</p>
</Child>
</template>
子组件：
<template>
<div class='child'>
<slot name='child1'></slot>
<p>子组件</p>
<slot name='child2'></slot>
</div>
</template>
浏览器查看输出:
第一个给子组件的内容
上面是父组件slot传的内容
子组件
第二个给子组件的内容
3.作用域插槽
在父组件想要使用子组件的值，除了使用ref获取，还可以使用slot
子组件：
<template>
<div class='child'>
<slot :formParams='formParams'></slot>
</div>
</template>
父组件：
<template>
<Child>
<template slot-scope='prop'>
<p>用户名：{{prop.formParams.userName}}</p>
<p>密码：{{prop.formParams.passWord}}</p>
</template>
</Child>
</template>
浏览器查看输出:
用户名：张三
密码：123456
4.v-slot
第一种(匿名slot):
子组件：
<template>
<div class='child'>
<slot :formParams='formParams'></slot>
</div>
</template>
父组件：
<template>
<Child>
<template v-slot:default='prop'>
<p>用户名：{{prop.formParams.userName}}</p>
<p>密码：{{prop.formParams.passWord}}</p>
</template>
</Child>
</template>
浏览器查看输出:
用户名：张三
密码：123456
第二种(具名slot)
子组件：
<template>
<div class='child'>
<slot :formParams='formParams' :name='childSlot'></slot>
</div>
</template>
父组件：
<template>
<Child>
<template v-slot:childSlot='prop'>
<p>用户名：{{prop.formParams.userName}}</p>
<p>密码：{{prop.formParams.passWord}}</p>
</template>
</Child>
</template>
浏览器查看输出:
用户名：张三
密码：123456
watch和computed区别 及二者场景
watch:
监听属性 监听属性的变化；
不支持缓存，数据变，直接会触发相应的操作；
当一条数据影响多条数据的时候就需要用watch；
监听的函数接收两个参数（newVal,oldVal)；监听的对象可以是函数，也可以是字符串；
//监听数据必须是data中声明过或者父组件传递过来的props中的数据
watch:{
watchFun(newVal,oldVal){
console.log(newVal,oldVal)
}
}
watch:{
'obj.userName':function(){
console.log('值更改了')
}
}
//监听复杂数据类型
watch:{
watchFun:{
handle(newVal,oldVal){
console.log(newVal,oldVal)
},
deep:true
}
}
computed:
计算属性通过属性计算而得来的属性；
支持缓存，只有依赖数据发生改变，才会重新进行计算；
当一个属性受多个属性影响的时候就需要用到computed；
computed中的函数必须用return返回最终的结果；
//函数的返回值就是属性的属性值，函数get，数据发生变化set
computed:{
computedTotal(){
return this.num * this.price
}
}
路由懒加载和组件懒加载
//导入方式相同
第一种：component: resolve => (require(['路径',resolve]))
第二种：const HelloWord = () => import('路径')
路由总结
//路由模式
hash: 默认的路由模式，即：#/路由地址；
window.onhashchange监听路径的切换；
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
}
history: 不会看到#，只剩：/路由地址；
window.onpopstate监听路径的切换；
刷新会出现404 的情况，需要后台配置；
history api分为切换和修改：
切换历史状态，包括back、forward、go三个方法
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
修改历史状态，包括了pushState、replaceState两个方法，均接收三个参数：stateObj，title，url
history.pushState({color:'red'}, '测试', 'home')
//全局钩子 ：beforeEach,arterEach,接收三个参数to,form,next
const router = new VueRouter({
routes ,
})
router.beforeEach((to, from, next) => {
if(to.meta.login){
next('/login');
}
next();
});
router.afterEach((to, from)=>{
document.title = to.name;
})
//路由钩子 beforeEnter，参数同上
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
//组件钩子
beforeRouteEnter //在渲染该组件的对应路由前调用，不能获取组件实例 `this`，因为当钩子执行前，组件实例还没被创建
beforeRouteUpdate (2.2 新增) //在当前路由改变，但是该组件被复用时调用
beforeRouteLeave //导航离开该组件的对应路由时调用，可以访问组件实例 `this`，可以通过 next(false) 来取消导航
//常用路由传参取参
1.this.$router.push({
path:'/home',
query:{
name: '张三',
admin: '普通用户'
}
})
取值： this.$route.query.name //张三
2. this.$router.push({
name:'home',
params:{
name: '张三',
admin: '普通用户'
}
})
取值： this.$route.params.name //张三
3.<router-link :to="{ path: '/home', query: { name: '张三' }}">首页</router-link>
取值： this.$route.query.name //张三
4.<router-link :to="{ name: 'home', params: { name: '张三' }}">首页</router-link>
取值： this.$route.params.name //张三
5. 动态路由传参
router.js
{
path: '/home/:id',
name: 'home',
component: () => import('@/views/home/home')
}
<router-link to="/home/123">首页</router-link>
取值： this.$route.params.id //123
