Vue2/Vue3-插槽(全)

一、插槽的定义

vue实现了一套内容分发的Api，将<slot>元素作为承载内容分发

二、插槽的注意事项

父组件模板的内容只能访问父组件的作用域，子组件的模板只能访问子组件的作用域。

也就是说插槽的内容可以访问父组件的数据作用域，因为插槽内容本身就是在父组件的模板中定义的，插槽内容是无法访问子组件中的数据，vue模板中的表达式只能访问其定义时在所处的作用域，这个和js的词法作用域规则是一样的。

三、普通插槽

// 父组件
import chacao from "./chacao.vue"
components:{ chacao }

<chacao>
  hahaja
  <span>fffff</span>
</chacao>

// 子组件
<div>
  <slot></slot> // 所有内容将会显示到这
</div>

四、后备内容

有时为一个插槽设置具体的后备(也就是默认)内容是很有用的，它只会在没有被提供内容的时候被我渲染

// 父组件:提供了内容，子组件显示save
<submit-button>
  save
</submit-button>

// 父组件: 无内容，子组件显示submit
<submit-button>
</submit-button>

// 子组件
<button t