vue学习4

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

1. 作用：修改地址栏路径时，切换显示匹配的组件
2. 说明：Vue官方插件，是第三方包
3. 官网：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的区别：

1. src/view文件夹：页面组件-页面展示-配合路由用
2. 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标签)

1. 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
   

<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.跳转传参

1. 查询参数传参：
   语法：

	to="/path?参数名=值"

对应页面组件接收传递过来的值

	$route.query.参数名

2. 动态路由传参
   
   
   两种传参的区别：
   

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 跳转
语法：

1. path 路径跳转（简易方便）

this.$router.push('路由路径')
this.$router.push({
	path:' 路由路径 '
})

2. name命名路由跳转（适合path长的场景）

this.$router.push({
	name:' 路由名 '
})

{ name:' 路由名 '，path:'/path/xxx', component:xxx },

2. 路由传参

1. path路径跳转传参（query传参）
   
   
2. 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

1. 是什么：其实是一个容器
   是Vue的内置组件，当他包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们
   也是一个抽象组件，他自身不会渲染成一个DOM元素，也不会出现在父组件链中

2. 优点：帮助缓存

3. 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当组件不被使用时触发 ->离开页面触发