vue3插槽 Slots

Vue���槽（Slot）的本质是组件间通信的一种方式，具体来说是Vue的内容分发机制。插槽允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽，可以将其视为组件封装期间为用户预留的内容占位符。插槽的显示与否以及具体如何显示，是由父组件来决定的，而插槽显示的位置则由子组件自身决定。

官方给了一个理解插槽的例子：和avaScript 函数作类比，其概念是类似。

// 父元素传入插槽内容FancyButton('Click me!')// FancyButton 在自己的模板中渲染插槽内容function FancyButton(slotContent) {  return `      ${slotContent}    `}

一个概念：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。这和 JavaScript 的词法作用域规则是一致的。

默认内容

      Submit   

具名插槽

//父组件中定义插槽的内容          //或          { slotProps.text }} {{ slotProps.count }}{ text }} {{ count }}    { message }}