Vue作用域插槽实现方法及作用详解


Posted in Javascript onJuly 08, 2020

默认插槽和具名插槽的概念比较好理解,这里主要以官方文档的案例来讲解一下作用域插槽。

首先是有一个currentUser的组件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <current-user>
      {{ user.firstName }}
    </current-user>
  </div>
  <script src="vue.min.js"></script>
  <script>
    Vue.component('currentUser', {
      template: `
        <span>
          <slot>{{ user.lastName }}</slot>
        </span>
      `,
      data() {
        return {
          user: {
            firstName: 'w',
            lastName: 'ts'
          }
        }
      }
    })

    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

然而该页面无法正常工作,因为只有currentUser可以访问到user,出错的地方在这里:

Vue作用域插槽实现方法及作用详解

然后,引入一个插槽prop:

<span>
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>

接着,需要给v-slot带一个值来定义我们提供的插槽 prop 的名字:

<current-user>
  <template v-slot="wts">
    {{ wts.user.firstName }}
  </template>
</current-user>

简单的讲作用域插槽就是让插槽内容能够访问子组件中才有的数据,修改后便可以正常工作了。

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

Javascript 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
javascript打印输出json实例
Nov 11 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 #Javascript
实例讲解React 组件生命周期
Jul 08 #Javascript
详细分析React 表单与事件
Jul 08 #Javascript
详解JavaScript之ES5的继承
Jul 08 #Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 #Javascript
基于javascript canvas实现五子棋游戏
Jul 08 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
js 匿名调用实现代码
2009/06/19 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
教师节学生演讲稿
2014/09/03 职场文书
授权委托书
2014/09/17 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
开学第一天的感想
2015/08/10 职场文书
党员读书活动心得体会
2016/01/14 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书