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 相关文章推荐
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
php 图片上传类代码
2009/07/17 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python3中的json模块使用详解
2018/05/05 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
基于Python解密仿射密码
2019/10/21 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
稽核岗位职责
2015/02/10 职场文书
预备党员考察意见范文
2015/06/01 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python
Rust中的Struct使用示例详解
2022/08/14 Javascript