大道之行,天下为公。这篇文章主要讲述简单介绍关于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">
< h2 slot="title"> item.title
< p slot="desc"> item.desc
< span slot="tims"> item.tims
< /panel2>
< /div>
< !--组件模板-->
< script type="text/x-Template" id="panelTpl">
< div class="panel">
< div class="panel-header">
< div class="panel-body">
< slot name="desc">
< /div>
< div class="panel-bottom">
< /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 name="floot">
< /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="https://www.songbingjia.com/android/comData"> //slotData表示插槽key值
< slot> 如果没有插槽或者不具名就是显示当前
< slot name="floot" :slotData="https://www.songbingjia.com/android/comData">
< /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="https://www.songbingjia.com/android/comData">
< slot name="body" :slotData="https://www.songbingjia.com/android/comData">
< slot name="floot">
< /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"> 改变动态插槽
< /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分发内容 (多个分发)】本文地址:??https://www.linuxprobe.com/vue-slot-play.html??
推荐阅读
- #yyds干货盘点# 解决剑指offer(数组中重复的数字)
- # yyds干货盘点 # Python面向对象中的类变量,实例变量怎么来理解()
- #yyds干货盘点# js学习笔记二十一手动封装call
- 实现深拷贝最少得用几行代码()
- 类与对象—1
- #yyds干货盘点#return用法 - python基础学习系列(64)
- 用AutoHotkey和WinSCP访问坚果云 2022年4月18日
- 阿里面试居然跟我扯了半小时的CyclicBarrier
- JavaEE之多线程01