vue学习笔记之slot插槽用法实例分析


Posted in Javascript onFebruary 29, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue实现图片上传功能
May 28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 #Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
JsonServer安装及启动过程图解
Feb 28 #Javascript
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
You might like
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
Python实现的Excel文件读写类
2015/07/30 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python实现文字版扫雷
2020/04/24 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
python里反向传播算法详解
2020/11/22 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
年终考核评语
2014/01/19 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
老干部工作汇报材料
2014/10/28 职场文书
演讲开场白台词大全
2015/05/29 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书