vue学习笔记之作用域插槽实例分析


Posted in Javascript onFebruary 01, 2020

本文实例讲述了vue学习笔记之作用域插槽。分享给大家供大家参考,具体如下:

<child></child>
Vue.component('child', {
   data: function () {
     return {
       list: [1, 2, 3]
     }
   },
   template: '<div>
          <ul>
            <li v-for="item of list">{{item}}</li>
          </ul>
         </div>'
})

那么,我们要想让父组件每一次调用子组件时再定义显示方式,也就是说,在子组件中定义好了v-for循环了list,具体怎么显示,由父组件告诉我。那么在子组件中定义一个slot插槽,在父组件中添加一个作用域插槽【需要用template包裹】,在其内写显示的样式。

父组件需要得到子组件数据时,就需要template标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue中作用域插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child>
    <template slot-scope="props">
      <li>{{props.item}}</li><!--我想渲染成列表形式-->
    </template>
  </child>
</div>
</body>
</html>
<script>
  Vue.component('child', {
    data: function () {
      return {
        list: [1, 2, 3]
      }
    },
    template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>'
  })
  var vm = new Vue({
    el: '#app'
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
shiro授权的实现原理
Sep 21 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JavaScript实现切换多张图片
Jan 27 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
javascript设计模式之迭代器模式
Jan 30 #Javascript
You might like
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现的RSS阅读器实例
2015/07/25 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python中extend和append的区别讲解
2019/01/24 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python如何实现DES加密
2020/09/21 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
公司领导班子对照材料
2014/08/18 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
安全生产月标语
2014/10/07 职场文书
初婚初育证明范本
2015/06/18 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
html实现弹窗的实例
2021/06/09 HTML / CSS
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python