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


Posted in Javascript onFebruary 01, 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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 #Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 #Javascript
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
js页面加载后执行的几种方式小结
Jan 30 #Javascript
javascript设计模式之装饰者模式
Jan 30 #Javascript
原生js+ajax分页组件
Jan 30 #Javascript
You might like
基于php-fpm的配置详解
2013/06/03 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
文员的职业生涯规划发展方向
2014/02/08 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
审美与表现自我评价
2015/03/09 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
如何用python插入独创性声明
2021/03/31 Python
浅谈Python项目的服务器部署
2021/04/25 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js