这篇文章主要为大家展示了“vue中slot分发内容的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中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>
//组件
<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>
//组件
<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分发内容的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。