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 遮罩层和加载效果代码
Aug 01 Javascript
js跑步算法的实现代码
Dec 04 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
js对象的比较
2011/02/26 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
最新pycharm安装教程
2020/11/18 Python
python 实用工具状态机transitions
2020/11/21 Python
厨师个人自我鉴定范文
2014/04/19 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
起诉意见书范文
2015/05/19 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
mysql 获取相邻数据项
2022/05/11 MySQL