关于vue的slot分发内容(多个分发)

Karli ·

更新时间:2024-09-20

· 1500 次阅读

slot分发内容 (多个分发)

slot的多种用法

基本用法

插槽中使用data

动态插槽

slot分发内容 (多个分发)

组件模板-元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

<style media="screen">
    .panel{
      margin:10px;width:150px;
      border:1px solid #ccc
    }
    .panel-header,.panel-bottom{
      height: 20px;
      background-color:antiquewhite;
    }
    .panel-body{
      min-height: 50px;
    }
  </style>

<div class="app">
    <!--多个slot分发内容 v-for遍历-->
     <panel2 v-for="item in list">
       <h2 slot="title">{{item.title}}</h2>
       <p slot="desc">{{item.desc}}</p>
       <span slot="tims">{{item.tims}}</span>
     </panel2>
  </div>

<!--组件模板-->
<script type="text/x-Template" id="panelTpl">
   <div class="panel">
       <div class="panel-header"><slot name="title"></slot></div>
       <div class="panel-body">
         <slot name="desc"></slot>
       </div>
       <div class="panel-bottom"><slot name="tims"></slot></div>
   </div>
</script>

<script type="text/javascript">
var panelTpl={
  template:'#panelTpl'
}
var vm=new Vue({
  el:'.app',
  components:{//注册组件
    "panel2":panelTpl
  },
  data:{
    list:[
      {title:'新闻一标题',desc:'一的描述',tims:'2018-07-19'},
      {title:'新闻二标题',desc:'二的描述',tims:'2018-07-18'},
      {title:'新闻三标题',desc:'三的描述',tims:'2018-07-17'}
    ]
  }
});
</script>

slot的多种用法 基本用法

//组件
<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>

插槽中使用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>

动态插槽

//组件
<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

1024 个赞