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 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
Ejb技术面试题
2015/04/29 面试题
电大自我鉴定
2013/10/27 职场文书
无毒社区工作方案
2014/05/23 职场文书
电教室标语
2014/06/20 职场文书
群教个人对照检查材料
2014/08/20 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Elasticsearch 批量操作
2022/04/19 Python