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 相关文章推荐
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
javascript对象的创建和访问
Mar 08 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
JavaScript实现简单图片切换
Apr 29 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
移动端js图片查看器
2016/11/17 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
跟老齐学Python之用Python计算
2014/09/12 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
用Django写天气预报查询网站
2018/10/21 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
为什么python比较流行
2020/06/19 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
详解python metaclass(元类)
2020/08/13 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
C++面试题目
2013/06/25 面试题
应届毕业生个人自荐信范文
2013/11/30 职场文书
升国旗演讲稿
2014/09/05 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
质检员岗位职责
2015/02/03 职场文书