场景:

  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 全局插槽 全局插座的更多相关文章

  1. Vue学习之全局和私有组件小结(七)

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

  2. jQuery和vue 设置ajax全局请求

    一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...

  3. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

  4. Vue学习之--------全局事件总线(2022/8/22)

    文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...

  5. vue.js插槽

    具体讲解的url https://github.com/cunzaizhuyi/vue-slot-demo //例子 用jsfiddle.net去运行就好 <!DOCTYPE html> ...

  6. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  7. 通过UI库深入了解Vue的插槽的使用技巧

    Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...

  8. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

  9. vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置

    之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...

随机推荐

  1. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  2. QGIS2.18.0的精简编译

    1.下代码,下依赖库 - expat - fcgi - gdal - gsl-devel - iconv - openssl-devel - openssl-libs - pyqt4 - qca-de ...

  3. 使用django UWSGI 出现 Bad Request (400)

    使用 Nginx + Django+UWSGI 部署机器时,一直出现 Debugging Apache/Django/WSGI Bad Bad Request (400) 错误 最后发现问题是 Dja ...

  4. MooseFS代码分析(一)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. hdu2993之斜率dp+二分查找

    MAX Average Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  6. LINUX6安装Oracle10g无法启动安装界面解决

    ***********************************************声明*************************************************** ...

  7. html查看器android

    1.android的API提供了访问网络的一个类HttpURLConnection 2.通过发送GET请求获取服务器返回的html代码 3.先看看布局文件,如下所示, <?xml version ...

  8. [置顶] Xamarin Android安装教程(2016最新亲测安装版)

    写这篇安装教程前要说的几句话 之前很多人想用Vs来开发Android项目,苦于这个环境的安装.的确这并不是一件简单的事情,并不是开发者都能在花一上午能装好,如果你花了一天时间,第一个Xamarin   ...

  9. Eclipse Pydev添加MySQLdb模块,Windows下安装MySQL-python

    1.首先确保Windows下已经安装Python.Eclipse并且Eclipse已经集成Pydev能成功运行Python 2.下载MySQL-python 地址:http://www.codegoo ...

  10. iptables 命令详解

    转载:http://blog.chinaunix.net/uid-26495963-id-3279216.html 一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件 ...