插槽的使用

插槽

在子组件中，提供给父组件使用的一个占位符

<slot></slot>

作用

在父组件使用子组件时，动态更新子组件内容

插槽分类

具名插槽
在子组件中给插槽取个名字，父组件使用 v-slot 指令

子组件

<slot name='top'></slot>

父组件

<template v-slot:top></template>

默认插槽
不取名字

子组件

<slot></slot>

父组件

<template></template>

作用域插槽
带数据的插槽

子组件

<slot name='top' :content='msg'></slot>

父组件

<template v-slot:top='message'></template>

虚拟DOM

• 虚拟 DOM 本质上是一个普通的 JS 对象，用于描述试图的界面结构
• 虚拟DOM 改变的值映射到 真实DOM 上
• 按照一定算法（diff
  算法）将虚拟DOM 和 真实DOM 进行比较

存在目的：解决性能问题
vue 渲染时，使用虚拟dom代替真实dom，主要为解决渲染效率的问题
操作真实DOM，会引起重排（回流）、重绘带来大量的性能消耗，极大降低渲染效率