小程序免费模板平台_vue学习笔记之slot插槽用法实例分析

来源: 小程序免费模板平台      作者:jianzhan      发布时间:
vue学习笔记之slot插槽用法实例分析     ~Liu   这篇文章主要介绍了vue学习笔记之slot插槽用法,结合实例形式对比分析了vue使用slot插槽的相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了vue slot插槽用法。分享给大家供大家参考，具体如下：

不使用插槽，在template中用v-html解析父组件传来的带有标签的content

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 script src="npm/vue/dist/vue.js" /script 
 /head 
 body 
 div id="app" 
 child content=" p Rachel /p " /child 
 /div 
 /body 
 /html 
 script 
 ponent('child', {
 pro凡科抠图: ['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 
ponent('child', {
 template: ' div 
 p hello /p 
 slot 默认内容 /slot 
 /div '

使用插槽添加header和footer，使用‘具名插槽'，也就是给插槽起个名字，各找各的位置。此处也可以写默认值，如果父组件没有对应的插槽内容的话，会显示子组件定义的插槽的默认值。

 div id="app" 
 body-content 
 div slot="header" header /div 
 div slot="footer" footer /div 
 /body-content 
 /div 
ponent('body-content', {
 template: ' div 
 slot name="header" default header /slot 
 div content /div 
 slot name="footer" default footer /slot 
 /div '

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。


相关阅读