vue学习笔记之slot插槽基本用法实例分析
2020-02-13 11:30
671 查看
本文实例讲述了vue学习笔记之slot插槽基本用法。分享给大家供大家参考,具体如下:
不使用插槽,在template中用v-html解析父组件传来的带有标签的content
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <child content="<p>Rachel</p>"></child> </div> </body> </html> <script> Vue.component('child', { props: ['content'], template: '<div> <p>hello</p> <div v-html="this.content"></div> </div>' }) var vm = new Vue({ el: '#app' }) </script>
使用插槽,如果父组件为空,就会显示slot中定义的默认内容
<child> <p>Rachel</p> </child>
Vue.component('child', { template: '<div> <p>hello</p> <slot>默认内容</slot> </div>' })
使用插槽添加header和footer,使用‘具名插槽',也就是给插槽起个名字,各找各的位置。此处也可以写默认值,如果父组件没有对应的插槽内容的话,会显示子组件定义的插槽的默认值。
<div id="app"> <body-content> <div class="header" slot="header">header</div> <div class="footer" slot="footer">footer</div> </body-content> </div>
Vue.component('body-content', { template: '<div> <slot name="header">default header</slot> <div class="content">content</div> <slot name="footer">default footer</slot> </div>' })
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue学习笔记之过滤器的基本使用方法实例分析
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- Python学习笔记之Zip和Enumerate用法实例分析
- 学习笔记(14):Python数据分析与爬虫-Python爬虫:Requests库的基本用法
- 学习笔记(13):Python数据分析与爬虫-Numpy:ndarray的基本用法
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- Vue学习笔记 3 - 组件化 / slot(插槽)
- (Java2D 学习笔记系列) (一)一个简单的图像填充实例及其分析理解
- input子系统学习笔记五 按键驱动实例分析上
- 【Spring学习笔记七】-Spring MVC基本配置和实例
- input子系统学习笔记六 按键驱动实例分析下
- SWFObject基本用法实例分析
- 学习笔记--Git 基本用法
- Canvas 基本用法学习笔记
- input子系统学习笔记 按键驱动实例分析下
- linux wget 命令用法详解(全解+实例说明)-【linux学习笔记】
- android 学习笔记 服务的基本用法
- TensorFlow学习笔记之四——源码分析之基本操作
- iOS学习笔记-019.UIScrollView的基本属性和用法
- List Control & Tree Control & CImageCtrl 基本常规用法学习笔记