vue 插槽和具名插槽快速入门

组件中使用slot

solt的目的就是在使用对应组件的时候展示不同的dom、slot就是一个插槽，我们可以在引入组件的时候插入对应的需要在组件中额外展示的结构、组件中就需要使用slot插槽接受传入的dom结构、slot在组件中定义的位置会让我们传入的结构展示在组件中的对应位置

slot有一种叫具名插槽、他会让对他只会渲染对应name值的结构、

// 引入的inputNum组件
<input-num :num="num" @AddUp="AddUp" @aaa="aaa">  //传递的参数和事件还是定义在标签上
  <h3 slot="header">333333333333333333333333333333</h3>//传递的dom结构
  <h1>111111111111111111111111111111</h1>//传递的dom结构
  <h2>222222222222222222222222222222</h2>//传递的dom结构
  <img src="../assets/logo.png" alt=""> //传递的dom结构
</input-num> 

============================================>

//inputNam组件
<div class="add">  
    <h1>我是inputNam组件</h1>
    <slot></slot> // 传入的结构就会在这个位置展示
    <slot name="header"></slot> //因为name值和传递的H3的name值相同、所以H3只会在这里展示、不会在上面展示、即使没有这个具名插槽、H3也不会在上面展示，因为没有对应name名称为header的元素
</div>