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>