快捷導(dǎo)航

關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))

更新時(shí)間：2022年03月29日 16:58:03 作者：黑色咖啡 Ken

這篇文章主要介紹了關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

slot分發(fā)內(nèi)容 (多個(gè)分發(fā))

組件模板-元素可以用一個(gè)特殊的屬性 name 來配置如何分發(fā)內(nèi)容。多個(gè) slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對(duì)應(yīng) 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">
? ? <!--多個(gè)slot分發(fā)內(nèi)容 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:{//注冊(cè)組件
    "panel2":panelTpl
  },
  data:{
    list:[
      {title:'新聞一標(biāo)題',desc:'一的描述',tims:'2018-07-19'},
      {title:'新聞二標(biāo)題',desc:'二的描述',tims:'2018-07-18'},
      {title:'新聞三標(biāo)題',desc:'三的描述',tims:'2018-07-17'}
    ]
  }
});
</script>

slot的多種用法

基本用法

//組件
<template>
    <div class="com">
        <slot name="header"></slot>
        <slot>如果沒有插槽或者不具名就是顯示當(dāng)前</slot>
        <slot name="floot"></slot>
    </div>
</template>
<script>
    export default {
        
    }
</script>
 
//使用
<template>
	<div id="app">
		<com>
			<div class="header" slot="header">
				我將會(huì)插入到名為header的插槽當(dāng)中
			</div>
			<div class="floot" slot="floot">
				我將會(huì)插入到名為floot的插槽當(dāng)中
			</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>如果沒有插槽或者不具名就是顯示當(dāng)前</slot>
        <slot name="floot" :slotData="comData"></slot>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                comData:{
                    header:"我將會(huì)插入到名為header的插槽當(dāng)中",
                    floot:"我將會(huì)插入到名為floot的插槽當(dāng)中"
                }
            }
        },
    }
</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>

動(dòng)態(tài)插槽

//組件
<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:"我將會(huì)插入到名為header的插槽當(dāng)中",
                    body:"我將會(huì)插入到名為body的插槽當(dāng)中"
                }
            }
        },
    }
</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">改變動(dòng)態(tài)插槽</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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: