Vue作用域插槽slot-scope实例代码


Posted in Javascript onSeptember 05, 2018

vue中的插槽有三种:单个插槽、具名插槽、作用域插槽,这个在官网上能看到

(https://cn.vuejs.org/v2/guide/components.html#单个插槽)

作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供。比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的。这个数据具体是什么由el-table-column中指定,类似:

<slot name="**" :data="data"></slot>
export default {
data: function(){
return {
data: ['1','2','3','4','5','6']
}
},
}

而scope就是上面代码中的data。

昨天看vue的官网文档,在slot-scope这块不是特别的明白,今天自己做了一个小例子,便于理解。

先说一下我们假设的应用常用场景,我们已经开发了一个代办事项列表的组件,很多模块在用,现在要求在 不影响已测试通过的模块功能和展示 的情况下,给 已完成的代办项增加一个对勾效果

也就是说,代办事项列表组件要满足一下几点

  1. 之前数据格式和引用接口不变,正常展示
  2. 新的功能模块增加对勾

解决办法很多,不过为了解释组件作用域插槽,我们就用slot-scope了,写列一下之前组件的代码。

todo-list.vue 组件

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot v-bind:itemValue = "item" >
   {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

<script>
export default {
 name: 'todoList',
 props: {
 todos: Array
 },
 data(){
 return {
  todoList:this.todos
 }
 }
}
</script>

组件代码

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot>
  {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

<script>
export default {
 name: 'todoList',
 props: {
 todos: Array
 },
 data(){
 return {
  todoList:this.todos
 }
 }
}
</script>

父组件代码

<template>
 <div id="app">
 <h2>之前组件调用</h2>
 <todo-list v-bind:todos="todosBefore" ></todo-list>
 </div>
</template>

<script>
import todoList from './components/todo-list.vue'

export default {
 name: 'app',
 data:function(){
 return {
  todosBefore:[
  {
   test:'询问时间',
   id:12312313123
  },
  {
   test:'代办1',
   id:123123123423423
  },
  {
   test:'爱你地方年底见?',
   id:12312313123234234
  },
  {
   test:'时间2',
   id:1231231312323333
  },
  {
   test:'师生情是行情',
   id:12313333333
  }
  ]
 }
 },
 components: {
 todoList
 }
}
</script>

展示效果

Vue作用域插槽slot-scope实例代码

步骤

为了实现代办事项增加对勾效果,我们要在data中调整数据结构,新增 todosAfter 数组,并给每一项增加 isComplete 标识。

todosAfter:[
  {
   test:'询问时间',
   isComplete:true,
   id:12312313123
  },
  {
   test:'代办1',
   isComplete:false,
   id:123123123423423
  },
  {
   test:'爱你地方年底见?',
   isComplete:false,
   id:12312313123234234
  },
  {
   test:'时间2',
   isComplete:true,
   id:1231231312323333
  },
  {
   test:'师生情是行情',
   isComplete:true,
   id:12313333333
  }
  ],

理解插槽和数据传递

自己在看别人的帖子比较吃力的地方就是弄不清楚这个插槽作用域到底是什么,有什么功能,我用大白话来屡屡思路。 弄清楚两个问题

  1. 插槽solt代码在哪里编写? 当然在父组件内, solt是子组件暴露给父组件的接口,需要父组件传给子组件 。
  2. 插槽作用域,作用域插槽字面理解,仅仅只对插槽生效。

Vue作用域插槽slot-scope实例代码

那传递步骤是

  1. 父组件把数据给子组件,父=>子
  2. 子组件把数据给插槽,并暴露给父组件接口
  3. 父组件调用子组件的插槽slot接口和数据

我们之前给数据数据增加了 isComplete 属性,现在要将子组件 item 传递给插槽,并给父组件暴露数据接口 itemValue ,重点在 v-bind:itemValue = "item" 这一句 。

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot v-bind:itemValue = "item" >
   {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

接下来是父组件调用子组件的slot和 itemValue 数据。

<h2>之前组件调用</h2>
<todo-list v-bind:todos="todosAfter">
 <template slot-scope="slotProps">
  <!-- 打印itemvalue数据-->
  <div style="background:red; border-bottom:2px solid blue;">
   {{slotProps.itemvalue}}
  </div>
  <!-- 根据判断条件展示对号元素 -->
  <span v-if="slotProps.itemValue.isComplete">✓</span>
  <!-- 显示代办事项名称 -->
  {{ slotProps.itemValue.test }}
 </template>

</todo-list>

效果如下

Vue作用域插槽slot-scope实例代码

附实例代码:github link

总结

其实作用域插槽很类似于入参函数,组件相当于cb,而cb的入参就相当与slotProps接收的参数,只不过名称和形式变了个样子。

<!-- 函数 -->
function foo(str,cb){
 var msg = str + '你好';
 cb(msg);
}
<!-- 调用 -->
foo('愚坤',function(msg){
 alert(msg)
})

foo('愚坤',function(msg){
 console.log(msg)
})

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

Javascript 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
Boostrap入门准备之border box
May 09 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 #Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 #Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 #Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 #Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 #Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Yii实现简单分页的方法
2016/04/29 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
nodejs基础应用
2017/02/03 NodeJs
Require.js的基本用法详解
2017/07/03 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python实现简单神经网络算法
2018/03/10 Python
简单了解python数组的基本操作
2019/11/26 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
校运会口号
2014/06/18 职场文书
个人作风建设心得体会
2014/10/22 职场文书
庆六一开幕词
2015/01/29 职场文书
小学生暑假生活总结
2015/07/13 职场文书