@[toc]
3.14插槽分发
父子组件使用时,有时需要将<font color='red'>父元素的模板跟子元素模板进行混合</font>,这时就要用到<font color='red'>slot插槽</font>进行内容分发, 简单理解就是<font color='red'>在子模板定义中先占个位置<slot>等待父组件调用时进行模板插入</font>。
3.14.1slot插槽
<font color='red'>注意:</font>在子组件模板定义中使用\<slot>标签定义插槽位置,标签中可以填写内容,当父组件调用子组件且不传入内容时显示此\<slot>标签体中内容,当父组件在引用\<child>子组件时,标签中的内容会放在子组件的\<solt>插槽中。
举例
完整代码:
<div id="app">
<!-- 传入数据 -->
<child :msg="msgText">
<!-- 传入模板,混合子模板 -->
<h4>父组件模板</h4>
<h5>模板混入....</h5>
</child>
</div>
<template id="child-template">
<div>
<div>我是子组件</div>
<div>{{msg}}</div>
<!-- 定义slot插槽进行占位 -->
<slot>我是默认内容,父组件不传入时我显示</slot>
</div>
</template>
<script>
Vue.component('child', {
template:'#child-template',
props:['msg']
});
var app = new Vue({
el:'#app',
data:{
msgText:'父组件数据'
}
});
</script>
结果展示
3.14.2具名插槽
<font color='red'>具名插槽slot, 就是给插槽起个名字</font>。在子组件定义时可以定义多个\<slot>插槽,同时通过name属性指定一个名字就可实现匹配,如:\<slot name='header'>,父组件引用时使用\< slot='header'>进行匹配插槽插入元素。
<font color='red'>注意点1:</font>子组件模板定义了两个插槽header和footer,分别使用name属性进行名称的指定,父组件引用子组件的标签中通过slot属性,来确定内容需要分发到哪个插槽里面。
<font color='red'>大白话讲:</font>slot标签通过配置name="header"名字,而父组件引用子组件的待传入标签通过配置slot="header"进行匹配插槽位置。
举例
完整代码:
<div id="app">
<!-- 传入数据 -->
<child :msg="msgText">
<!-- 传入模板,混合子模板 -->
<h4 slot="header">头部</h4>
<h4 slot="footer">底部</h4>
</child>
</div>
<template id="child-template">
<div>
<!-- 插槽header -->
<slot name="header"></slot>
<div>我是子组件</div>
<div>{{msg}}</div>
<!-- 插槽footer -->
<slot name="footer"></slot>
</div>
</template>
<script>
Vue.component('child', {
template:'#child-template',
props:['msg']
});
var app = new Vue({
el:'#app',
data:{
msgText:'父组件数据'
}
});
</script>
结果展示
3.14.3作用域插槽slot-scope
作用域插槽slot-scope,父组件通过<slot>插槽混入子组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据,使用方式:<font color='red'>\<slot text='子组件数据'></font>,父组件通过<font color='red'>\<template slot-scope="props"></font>进行引用。
<font color='red'>大白话讲就是:</font>子组件插槽slot定义属性,让父组件待插入的标签内容可以直接使用slot定义的属性内容。
<font color='red'>说明点1:</font>在slot标签中指定属性值,类似于props属性的使用,只不过是反过来的。即:组件标签中props属性用于父传子,而slot标签中指定属性值,是子传父。
<font color='red'>说明点2:</font>引用时用template标签指定,slot-scope属性指定接收数据的变量名,就可以使用花括号形式取值了。
完整代码:
<div id="app">
<!-- 传入数据 -->
<child>
<!-- slot-scope的值可以随便起变量名 -->
<template slot-scope="props">
<div>{{msgText}}</div>
<div>{{props.text}}</div>
</template>
</child>
</div>
<template id="child-template">
<div>
<!-- 插槽text值 -->
<slot text="子组件数据" ></slot>
</div>
</template>
<script>
Vue.component('child', {
template:'#child-template'
});
var app = new Vue({
el:'#app',
data:{
msgText:'父组件数据'
}
});
</script>
3.14.4slot-scope版本更新
在2.5+之后,可以不局限于\<template>, 任何元素都可以,同时可以使用<font color='red'>解构赋值的方式</font>进行数据解析。
子组件:
<template id="child-template">
<div>
<!-- 插槽text值 -->
<slot name="head" text="header"></slot>
<slot name="foot" text="footer" value="18"></slot>
<slot name="cont" text="content" title="main"></slot>
</div>
</template>
父组件使用:
<div id="app">
<!-- 传入数据 -->
<child>
<!-- div标签使用slot-scope -->
<div slot="head" slot-scope="props">子组件数据: {{props.text}} <span>{{fa}}</span></div>
<div slot="foot" slot-scope="props">{{props.text}} == {{props.value}}</div>
<!-- 结构赋值 -->
<div slot="cont" slot-scope="{text, title}">{{text}} == {{title}}</div>
</child>
</div>
js部分:
Vue.component('child', {
template:'#child-template'
});
var app = new Vue({
el:'#app',
data:{
fa:'father 数据'
}
});
结果展示
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)
9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)
13.vue2知识点:组件的props属性、非props属性、props属性校验
16.vue2知识点:动态组件
17.vue2知识点:混入
19.vue2知识点:全局事件总线(GlobalEventBus)
23.vue2知识点:路由
25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)
26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习:待办事项Todo-list案例练习
28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。