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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
require.js的用法详解
Oct 20 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
深入浅析React中diff算法
May 19 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php实现的ping端口函数实例
2014/11/12 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
javascript 回调函数详解
2014/11/11 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
js如何验证密码强度
2020/03/18 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python中的yield使用方法
2014/02/11 Python
Python3基础之基本数据类型概述
2014/08/13 Python
Python单链表的简单实现方法
2014/09/23 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
python的slice notation的特殊用法详解
2019/12/27 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
电力安全事故反思
2014/04/27 职场文书
初中英语演讲稿
2014/04/29 职场文书
2014年司法局工作总结
2014/12/11 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python