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

日期:2021-01-06 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

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程序设计有所帮助。