vue学习day10-插槽、单页应用程序（SPA-Single Page Application）-默认插槽、后备内容（默认值）、具名插槽、作用域插槽（插槽的一个传参语法）

30、插槽

插槽可分为默认插槽和具名插槽

（1）默认插槽

1）作用：让组件内部的一些结构支持自定义

2）语法：

①组件内需要定制的结构部分，改用<slot></slot>占位

②使用组件时，<MyDialog></ MyDialog >标签内部，传入结构替换slot

③示例：

逻辑：

（2）后备内容（默认值）

1）概念：封装组件时，可以为预留的’<slot>’插槽提供后备内容（默认内容）

2）语法：在<slot>标签内，放置内容，作为默认显示的内容

3）效果：

①外部使用组件时，不传东西，则slot会显示后备内容

②外部使用组件时，传东西了，则slot整体会被换掉

4）示例：

 

（3）具名插槽

1）语法：

①多个slot使用name属性区分名字

②template配合v-slot：名字来分发对应标签

2）示例：

初始：

代码逻辑：

效果：

（4）作用域插槽（插槽的一个传参语法）

1）概念：定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

2）适用场景：

①父传子，动态渲染表格

②利用默认插槽，定制操作列

③删除或查看都需要用到的当前项的id，属于组件内部的数据，通过作用域插槽传值绑定，进而使用

3）基本使用步骤

①给slot标签，以添加属性的方式传值

②所有添加的属性，都会被收集到一个对象中

③在template中，通过‘#插槽名=“obj”’接收，默认插槽名为default

4）示例：

效果：

31、单页应用程序（SPA-Single Page Application）

（1）概念：所有功能在一个html页面上实现

（2）单页面应用程序的优缺点：

1）优点：按需更新性能高，开发效率高，用户体验好

2）缺点：学习成本，首屏加载慢，不利于SEO

（3）应用场景

系统网站/内部网站/文档类网站/移动端站点

（4）注：

1）单页面应用程序按需更新性能高，开发效率高，用户体验好的最大原因是：页面按需更新

2）要实现按需更新，首先要明确：访问路径和组件的对应关系（路由）

准备一下，明天上路由！