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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
Java程序员面试题
2013/07/15 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
销售顾问岗位职责
2014/02/25 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
学生个人总结范文
2015/02/15 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python