1.插槽-默认插槽
作用：让组件内部的一些结构支持自定义
语法：1.组件内需要定制的结构部分，改用slot占位
<slot></slot>
2.使用组件时
<MyDialog></MyDialog>标签内部，传入结构替换slot
2.插槽-后备内容
给插槽设置默认显示内容
语法：在slot标签内，放置内容，作为默认显示内容
3.插槽-具名插槽
一个插槽名（slot）不够，需要多个时：
1. 多个slot使用name属性区分名字
<slot name="head"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>3. template配合v-slot:名字来对应标签
<template v-slot:head>大标题</template>
<template v-slot:main>大标题</template>
<template v-slot:footer>大标题</template>4. v-slot:插槽名可以简化为#插槽名
<template #head>大标题</template>
<template #main>大标题</template>
<template #footer>大标题</template>
4.插槽-作用域插槽
定义slot插槽的同时，可以传值，给插槽上绑定数据，将来使用组件时可以使用
场景：父传子，动态渲染表格内容，利用默认插槽，定制操作列，删除需要用到当前项的id，属于组件内部的数据，通过作用域插槽传值绑定，来使用
基本步骤
1. 给slot标签，以添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>
2. 所有添加的属性，都会被收集到一个对象中
{id:3, msg:'测试文本' }
3. 在template中，通过#插槽名="obj" 接收，默认插槽名为default
<MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></templata>
</MyTable>
5.商品列表
6.单页应用程序
SPA：所有功能在一个html网页上实现
7.路由
路由：确定访问路径和组件的对应关系
根据路由就能知道不同路径的，应该匹配渲染那个组件
路由的基本使用：
VueRouter
- 作用：修改地址栏路径时，切换显示匹配的组件
- 说明：Vue官方插件，是第三方包
- 官网：https://v3.router.vuejs.org/zh/
<template><div><div class="top"><!--路由出口--><router-view></router-view></div><div class="footer_wrap"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a></div></div>
</template><script>export default {}
</script><style scoped>
.footer_wrap {width: 100%;background-color: gray;height: 100px;text-align: center;line-height: 100px;
}
a {margin: 0 50px;color: black;text-decoration: none;font-size: 20px;
}
</style>
8.组件存放目录问题
.vue文件分为两类：页面组件和复用组件
分类开来更易维护
有导航栏的是页面组件，没有重复的复用组件
components与views的区别：
- src/view文件夹：页面组件-页面展示-配合路由用
- src/components文件夹：复用组件-展示数据-常用于复用
9.路由的封装分离
把整个路由封装到了一个js中，拆分模块，利于维护
import VueRouter from 'vue-router'import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '@/views/Friend.vue'
import Vue from 'vue'
Vue.use(VueRouter)//VueRouter插件初始化//创建了一个路由对象
const router = new VueRouter({//路由规则们 routers//一条路由规则 router { path: 路径，component:组件 }routes:[{ path:'/find',component:Find},{ path:'/my', component:My },{ path:'/friend',component:Friend}]
})export default router快速引入组件：
基于@指代src目录，从src目录出发找组件
10.声明式导航
1.导航链接
vue-router提供了一个全局组件router-link(取代a标签)
- 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
- 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
<template><div><div class="top"><!--路由出口--><router-view></router-view></div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div></div>
</template>2.两个类名
router-link-active:模糊匹配（用的多）
to=“/my” 可以匹配 /my /my/a /my/b
router-link-exact-active：精确匹配
to=“/my” 仅可以匹配 /my
link自定义高亮名
linkActiveClass:'active',linkExactActiveClass:'exact-active'
3.跳转传参
- 查询参数传参：
语法：
to="/path?参数名=值"
对应页面组件接收传递过来的值
$route.query.参数名
- 动态路由传参
两种传参的区别：
4.动态路由参数的可选值
{ path:' /search/:words? ',component: Search }
11.Vue路由
1.重定向
匹配path后，强制跳转path路径
语法：{ path:匹配路径，redirect:重定向到的路径 }
2.404
作用：当路径找不到匹配时，给个提示页面
位置：配在路由器最后
语法：path:" * "(任意路径) - 前面不匹配就命中最后一个
{ path:' * ', component: NotFound }
3.模式设置
默认：hash路由 例如：http://localhost:8080/#/home
常用：history路由 例如：http://localhost:8080/home（上线要服务端支持）
12.编程式导航
1.基本跳转
用js 跳转
语法：
- path 路径跳转（简易方便）
this.$router.push('路由路径')
this.$router.push({path:' 路由路径 '
})
- name命名路由跳转（适合path长的场景）
this.$router.push({name:' 路由名 '
}){ name:' 路由名 '，path:'/path/xxx', component:xxx },
2. 路由传参
- path路径跳转传参（query传参）
- name命名路由跳转传参（query传参）
name.$router.push({name:'路由名字'query:{参数名1：'参数值1'，参数名2：'参数值2'}，
//query与params二选一params:{参数名1：'参数值1'，words(要与路由对应):this.inpValue，}
})
path路径长 ,name路径短，query参数多，
13.面经基础版
组件缓存keep-alive
-
是什么：其实是一个容器
是Vue的内置组件，当他包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们
也是一个抽象组件，他自身不会渲染成一个DOM元素，也不会出现在父组件链中 -
优点：帮助缓存
-
keep-alive的三个属性
include和exclude只能二选一
(1)include:只有匹配的组件会被缓存
(2)exclude:任何匹配的组件都不会被缓存
(3)max:最多可以缓存多少组件实例
<template><div class="h5-wrapper" :include="['LayoutPage']"><keep-alive><router-view></router-view><keep-alive></div>
keep-alive的使用会触发两个声明周期函数
(1).activated当组件被激活（使用）时触发 ->进入页面触发
(2).deactivated当组件不被使用时触发 ->离开页面触发
