vue 全局插槽 全局插座
场景:
slot 能够让父组件内容插入到子组件中,但是子孙组件不能够使用slot直接插入内容。在弹窗的时候,全屏弹窗需要直接在组件最上层显示,如果父组件级别不够,弹出就可能不是全屏的。
知识点:
1: aa 为组件 。父组件中<aa>我是子组件的slot</aa> ,子组件中console.log(this.$slots) // [Vnode] 打印的虚拟dom含有text:“我是子组件的slot”。尽管那句话不会渲染出来,但是它是存在在子组件slot中的,如果slot没有命名,默认为default
2:vm.$forceUpdate()能够强制刷新组件。
思路:
组件a 中slot内容全部返回到组件b中,渲染成组件b的内容.
应用:
上层组件 : <global-slot />
任何子孙组件: <global-plug>这儿的任何内容会被显示在global-slot中,且这儿不会显示 </global-plug> 注:global-plug组件的this.$slots.default 就是虚拟dom
- //global-blug.js
- export default {
- install(Vue) { //引入该文件后直接Vue.use
- let plug = {},
- slot = {}
- Vue.component("global-plug", { // 创建插槽
- created() {
- slot = this // 将此组件this保存到起来
- },
- render(createElement) { // 当运行render函数时,强制刷新 global-slot 组件 因为global-slot组件的render函数会先运行。那时候slot是没有值的
- plug.$forceUpdate()
- }
- })
- Vue.component("global-slot", { // 创建插座
- render(createElement) {
- plug = this //将此组件this保存起来
- return slot.$slots && slot.$slots.default[0] // 将上面的插槽组件的slot虚拟dom值返回到插座中来。
- }
- })
- }
- }
升级:
在插座和插槽组件props 中传入属性,根据此属性的值,确认对应的插座和插槽。就如命名slot一样。
vue 全局插槽 全局插座的更多相关文章
- Vue学习之全局和私有组件小结(七)
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
- jQuery和vue 设置ajax全局请求
一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...
- vue 自动注册全局组件
vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...
- Vue学习之--------全局事件总线(2022/8/22)
文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...
- vue.js插槽
具体讲解的url https://github.com/cunzaizhuyi/vue-slot-demo //例子 用jsfiddle.net去运行就好 <!DOCTYPE html> ...
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- 通过UI库深入了解Vue的插槽的使用技巧
Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
- vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置
之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...
随机推荐
- Nginx日志切割案例讲解,Nginx的知识讲解
Nginx 是一个非常轻量的 Web 服务器,体积小.性能高.速度快等诸多优点.但不足的是也存在缺点,比如在产生的访问日志文件一直就是一个,不会自动地进行切割,如果访问量很大的话,将会导致日志文件容量 ...
- 完整教程--idea使用git进行项目管理
第一部分: 安装 1. 下载地址: https://git-scm.com/download/win; 如果速度慢, 使用 迅雷下载; 2. 点击安装, 然后下一步, 直到下面这个页面: 建议: 按 ...
- 【算法】字典的诞生:有序数组 PK 无序链表
参考资料 <算法(java)> — — Robert Sedgewick, Kevin Wayne <数据结构> ...
- node.js之express框架入门篇
一.express框架简介 express框架是后台的Node框架,在后台的受欢迎的程度,和jQuery一样 英语官网:http://expressjs.com/ 中文官网:http://www.ex ...
- this的取值
在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了. 情况1:构造函数 function Foo(){ this.name="王福朋" this ...
- 迭代加深搜索POJ 3134 Power Calculus
题意:输入正整数n(1<=n<=1000),问最少需要几次乘除法可以从x得到x的n次方,计算过程中x的指数要求是正的. 题解:这道题,他的结果是由1经过n次加减得到的,所以最先想到的就是暴 ...
- Java基础(十一) Stream I/O and Files
Java基础(十一) Stream I/O and Files 1. 流的概念 程序的主要任务是操纵数据.在Java中,把一组有序的数据序列称为流. 依据操作的方向,能够把流分为输入流和输出流两种.程 ...
- 側滑回退的layout(相似IOS側滑回退到上一个activity)
用过apple的同学应该都知道,大多数IOS应用都支持側滑回退,就不具体说明了,直接上图: 作为使用ios的android开发人员来说,我是特别喜欢这个功能的.既然这样,那就在android上也实现这 ...
- 有关怎样入门ACM
想给大家看看 所以就弄了原创了,造成作者困扰请联系在下. 来源: 吴垠的日志 一些题外话 首先就是我为什么要写这么一篇日志.原因非常easy,就是由于前几天有个想起步做ACM人非常诚恳的问我该怎样 ...
- jQuery 学习笔记(三)——事件与应用
页面载入时触发ready()事件 ready()事件类似于onLoad()事件.但前者仅仅要页面的DOM结构载入后便触发.而后者必须在页面所有元素载入成功才触发,ready()能够写多个,按顺序运行. ...