vue2.x插槽应用总结

  1 <template>
  2   <div class="slot-test">
  3     <!-- vue插槽应用总结： -->
  4 
  5     <!-- 1. 具名插槽：给插槽添加一个name属性； -->
  6 
  7     <!-- eg1:  -->
  8     <!-- 子组件： -->
  9     <div class="container">
 10       <header>
 11         <slot name="header"></slot>
 12       </header>
 13       <main>
 14         <!-- 这里其实就是name为default的具名插槽 -->
 15         <slot></slot>
 16         <!-- 等价于 -->
 17         <slot name="default"></slot>
 18       </main>
 19       <footer>
 20         <slot name="footer"></slot>
 21       </footer>
 22     </div>
 23 
 24     <!-- 父组件： -->
 25     <base-layout>
 26       <!-- 以下三种写法都可以 -->
 27       <!-- <template v-slot:header> -->
 28       <!-- <template #header> -->
 29       <!-- <template slot="header"> -->
 30       <template slot="header">
 31         <h1>Here might be a page title</h1>
 32       </template>
 33 
 34       <!-- 这里就是默认插槽的内容 -->
 35       <p>A paragraph for the main content.</p>
 36       <p>And another one.</p>
 37 
 38       <template #footer>
 39         <!-- <template v-slot:header> -->
 40         <!-- <template slot="header"> -->
 41         <p>Here‘s some contact info</p>
 42       </template>
 43     </base-layout>
 44 
 45     <!-- 2.作用域插槽：给子组件添加一个可以传输数据的属性 -->
 46 
 47     <!-- eg2:  -->
 48     <!-- 子组件： -->
 49     <span>
 50       <!-- 以下两种写法都可以 -->
 51       <!-- <slot v-bind:user="user"> -->
 52       <slot :user="user">
 53         {{ user.lastName }}
 54       </slot>
 55     </span>
 56 
 57     <!-- 父组件 -->
 58     <current-user>
 59       <!-- 以下几种写法都可以，其中的slotProps可以是任意名字 -->
 60       <!-- <template v-slot:default="slotProps"> -->
 61       <!-- <template #default="slotProps"> -->
 62       <!-- 这种适用于只有一个插槽的时候
 63       <template v-slot="slotProps"> -->
 64       <template slotScope="slotProps">
 65         {{ slotProps.user.firstName }}
 66       </template>
 67     </current-user>
 68 
 69     <!-- 3.动态插槽名：可以给插槽名定义变量，设置为动态的 -->
 70     <!-- eg3: -->
 71     <!-- 子组件 -->
 72     <div class="container">
 73       <span v-for="(slot, index) in slotList" :key="index">
 74         <slot :name="slot"></slot>
 75       </span>
 76     </div>
 77     <!-- 父组件 -->
 78     <base-layout>
 79       <!-- 以下几种方式都可以 -->
 80       <!-- <template v-for="(slot, index) in slotList" v-slot:[slot]>
 81         <div :key="index"></div>
 82       </template> -->
 83       <template v-for="(slot, index) in slotList" #[slot]>
 84         <div :key="index"></div>
 85       </template>
 86     </base-layout>
 87 
 88     <!-- 4.具名插槽、作用域插槽、动态插槽混合应用 -->
 89     <!-- eg4: 以ant-design-vue的table组件为例 -->
 90 
 91     <!-- 子组件 -->
 92     <a-table :columns="columns" :dataSource="tableData">
 93       <template
 94         v-for="(slotOpts, idx) in slotList"
 95         :slot="slotOpts.slot"
 96         slot-scope="text, record, index"
 97       >
 98         <a
 99           v-if="slotOpts.type === ‘aClick‘"
100           :key="idx"
101           :slot="slotOpts.slot"
102           @click="clickTitle({ ...record, index })"
103         >
104           {{ text }}
105         </a>
106         <div
107           class="table-slot-options"
108           v-if="slotOpts.type === ‘other‘"
109           :key="idx"
110         >
111           <slot
112             :name="slotOpts.slot"
113             :[slotOpts.slot]="{ text, record, index }"
114           ></slot>
115         </div>
116       </template>
117     </a-table>
118 
119     <!-- 父组件 -->
120     <Table :columns="curColumns" :tableData="tableData" :slotList="slotList">
121       <template #operation="{ operation }">
122         <!-- 与下面写法等价 -->
123         <!-- <template slot="operation" slot-scope="{operation}"> -->
124         <!-- <template v-slot:operation="{operation}"> -->
125         <div class="options">
126           插入任意内容
127           {{ operation.index }}
128         </div>
129       </template>
130       <template v-slot:test="{ test }">
131         <!-- 与下面写法等价 -->
132         <!-- <template  #test="{ test }"> -->
133         <!-- <template slot="test" slot-scope="{ test }"> -->
134         <div class="test">多个插槽test{{ test }}</div>
135       </template>
136     </Table>
137   </div>
138 </template>