vue中slot的多种用法

科技前沿 • 2025-01-27 07:10 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

1、基本用法

//组件 <template> <div class="com"> <slot name="header"></slot> <slot>如果没有插槽或者不具名就是显示当前</slot> <slot name="floot"></slot> </div> </template> <script> export default { } </script> //使用 <template> <div id="app"> <com> <div class="header" slot="header"> 我将会插入到名为header的插槽当中 </div> <div class="floot" slot="floot"> 我将会插入到名为floot的插槽当中 </div> </com> </div> </template> <script> import com from '@/components/com.vue'; export default { name:"App", components:{ com } } </script>

讯享网

2、插槽中使用data

讯享网

讯享网//组件 <template> <div class="com"> <slot name="header" :slotData="comData"></slot>//slotData表示插槽key值 <slot>如果没有插槽或者不具名就是显示当前</slot> <slot name="floot" :slotData="comData"></slot> </div> </template> <script> export default { data() { return { comData:{ header:"我将会插入到名为header的插槽当中", floot:"我将会插入到名为floot的插槽当中" } } }, } </script> //使用 <template> <div id="app"> <com> <template v-slot:header="{slotData}"> //必须使用template包裹，v-slot后面跟着的是插槽名，slotData插槽里表示的key值 <div class="header"> { 
  
    
  {slotData.header}} </div> </template> <template v-slot:floot="{slotData}"> <div class="floot"> { 
  
    
  {slotData.floot}} </div> </template> </com> </div> </template> <script> import com from '@/components/com.vue'; export default { name:"App", components:{ com } } </script>

3、动态插槽

//组件 <template> <div class="com"> <slot name="header" :slotData="comData"></slot> <slot name="body" :slotData="comData"></slot> <slot name="floot"></slot> </div> </template> <script> export default { data() { return { comData:{ header:"我将会插入到名为header的插槽当中", body:"我将会插入到名为body的插槽当中" } } }, } </script> //使用 <template> <div id="app"> <com> <template v-slot:[slotName]="{slotData}"> <div class="slot"> { 
  
    
  {slotData[slotName]}} </div> </template> <div class="floot" slot="floot"> <button @click="changeSlotName">改变动态插槽</button> </div> </com> </div> </template> <script> import com from '@/components/com.vue'; export default { name:"App", components:{ com }, data(){ return{ slotName:"header" } }, methods: { changeSlotName(){ this.slotName = this.slotName === "header" ? "body" : "header"; } } } </script>

vue中slot的多种用法

相关推荐