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 相关文章推荐
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
yii数据库的查询方法
2015/12/28 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python自动化报告的输出用例详解
2018/05/30 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python3个性签名设计实现代码
2018/06/19 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
人力资源部门的主要职能
2014/02/22 职场文书
广告创意求职信
2014/03/17 职场文书
新闻发布会策划方案
2014/06/12 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
会议主持词结束语
2015/07/03 职场文书
上级领导检查欢迎词
2015/09/30 职场文书