微信小程序推广_vue学习笔记之slot插槽根本用法实

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 

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

 div id="app" 
 body-content 
 div slot="header" header /div 
 div slot="footer" footer /div 
 /body-content 
 /div 

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

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