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实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
js 实现watch监听数据变化的代码
2019/10/13 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python之py2exe打包工具详解
2017/06/14 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python中的 enum 模块源码详析
2019/01/09 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
毕业学生推荐信
2013/12/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
护理专科自荐书范文
2014/02/18 职场文书
表决心的诗句大全
2014/03/11 职场文书
捐赠仪式主持词
2014/03/19 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js