vue中slot分发内容的示例分析

这篇文章主要为大家展示了“vue中slot分发内容的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中slot分发内容的示例分析”这篇文章吧。

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">       <h3 slot="title">{{item.title}}</h3>       <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分发内容的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！