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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
深入理解javascript变量声明
Nov 20 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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学习之PHP运算符
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
node跨域请求方法小结
2017/08/25 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
感恩节活动策划方案
2014/05/16 职场文书
党员自我剖析材料
2014/08/31 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL