如何理解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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
linux下php上传文件注意事项
2016/06/11 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
机关保密承诺书
2014/06/03 职场文书
车间安全生产标语
2014/06/06 职场文书
历史学专业求职信
2014/06/19 职场文书
教代会开幕词
2015/01/28 职场文书
2015年党小组工作总结
2015/05/26 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js