vue3 组合式API：插槽

一、内容与出口

1、 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。插槽内容可以是任意合法的模板内容，不局限于文本，可以是多个元素，甚至是组件

// 插槽内容可以是多个元素，也可以是组件

  Click me!
  

  Click me! 




//  模板

   




// 最终渲染出的 DOM 是这样：
Click me!

二、渲染作用域

1、插槽内容可以访问到父组件的数据作用域，因为插槽内容本身就是在父组件模板中定义的

//两个 {
  { message }} 插值表达式渲染的内容都是一样的
{
  { message }}
{
  { message }}

2、插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，换言之：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

三、默认内容：在外部没有提供内容的情况下，可以为插槽指定默认内容。

//例如： 组件


  


//如果想在父组件没有提供插槽内容时，在内渲染 “Submit” ，只需将 “Submit”放在
//标签之间，来作为默认内容



  
    Submit 
  



上述案例就可以在父组件中没有提供内容时  被渲染成 
Submit


//但是如果提供了内容Save，那么显示提供的内容就会取代默认内容
Save
//渲染成：
Submit

四、具名插槽

        场景：在父组件中使用的子组件中有多个插槽出口时，为了将内容精准的注入子组件的插槽出口时，此时就需要用到具名插槽了

        1、如果一个组件中有多插槽，