Vue 插槽 组件插入不固定内容

定义好一个组件，如果想插入图片或视频这非常不好的控制应该显示什么，这个时候可以使用插槽插入自定义内容

默认插槽

  <Login>
      <template>
  <h1>我是插入的内容</h1>
    </template>
  </Login >

组件

  <slot></slot>
    <!--插入内容的占位符-->
<button @click="login">登录</button>

具名插槽

带名字的插槽，上面写法适合插入一个内容的写法，这种写法可以插入多个内容

适合插入多个内容

<slot name="top"></slot>
    <!--插入内容的占位符-->
<button @click="login">登录</button>
        
<slot name="foot"></slot>

< template v-slot:foot > 另一种写法

 <Login>
      <template>
        <h1 slot="top">我是上面的内容</h1>
        <h1>我没有写SLOT不会显示,有两个插槽Vue不知道该放哪个合适</h1>
        <h1 slot="top">我会追加</h1>
        <h1 slot="foot">我是底部</h1>
      </template>
    </Login>

作用域插槽

作用域插槽可以从子组件返回数据给插槽使用者

子组件

   <slot :list="userList"></slot>
    <!-- 把用户列表传给插槽使用者  :后端名字可以自定义  等号后为传的数据 -->

 data() {
        return {
            userList: [{id:101,name:'dpc'}, {id:102,name:'cyy'}]
        }    }

插槽所有者

 <User>
      <template slot-scope="getList">
      <!--getList可以不用和子组件一样-->
      {{getList}}
      </template>
    </User>

可以通过getList.id拿值