vue v-slot 插槽的使用

slot  已经废弃，请使用v-slot代替

 

组件test:

<template >

    <div style="width: 400px;  border: 1px solid #ccc;">

       <header>
      <div>{{title}}</div>
       </header>

      <main style="padding: 30px 20px;">
        <slot ></slot>
      </main>

      <footer>
        <slot name="footer" ></slot>
      </footer>

    </div>

</template>

<script>
export default {
  props: ['title'],
}
</script>

使用组件：

 

<test  :title="title" >

        <span>这是一段信息</span>

        <!-- slot 废弃 -->
        <!-- <span slot="footer">
          <el-button type="primary" @click="visible=true">确认</el-button>
        </span> -->
        <!-- v-slot:footer 简写  #footer -->
        <template v-slot:footer>
          <el-button type="primary" @click="visible=true">确认</el-button>
        </template>
    </test>