如何理解Vue的作用域插槽的实现原理


Posted in Javascript onAugust 19, 2017

本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记

举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作)。而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue作用域插槽</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app2">
      <my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
        <!-- props对象接收来自子组件slot的$index参数 -->
        <template slot="cont" scope="props">
          <span>{{users[props.$index].id}}</span>
          <span>{{users[props.$index].name}}</span>
          <span>{{users[props.$index].age}}</span>
          <!-- 这里可以自定[编辑][删除]按钮的链接和样式 -->
          <a :href="'#edit/id/'+users[props.$index].id" rel="external nofollow" >编辑</a>
          <a :href="'#del/id/'+users[props.$index].id" rel="external nofollow" >删除</a>
        </template>
      </my-stripe-list>
    </div>
    <script>
      Vue.component('my-stripe-list', {
        /*slot的$index可以传递到父组件中*/
        template: `
          <div>
            <div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
              <slot name="cont" :$index="index"></slot>
            </div>
          </div>
        `,
        props: {
          items: Array,
          oddBgcolor: String,
          evenBgcolor: String
        }
      });
      new Vue({
        el: '#app2',
        data: {
          users: [
            {id: 1, name: '张三', age: 20},
            {id: 2, name: '李四', age: 22},
            {id: 3, name: '王五', age: 27},
            {id: 4, name: '张龙', age: 27},
            {id: 5, name: '赵虎', age: 27}
          ]
        }
      });
    </script>
  </body>
</html>

效果如下:

如何理解Vue的作用域插槽的实现原理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
Vue自定义事件(详解)
Aug 19 #Javascript
Vue内容分发slot(全面解析)
Aug 19 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python 解压pkl文件的方法
2018/10/25 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python+mysql实现教务管理系统
2019/02/20 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
烹调加工管理制度
2014/02/04 职场文书
仓管岗位职责范本
2014/02/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
中学生运动会广播稿
2015/08/19 职场文书
担保书格式范文
2015/09/22 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL